GO使用GPU go使用js

需要用到gojs 根据各位大牛的资料 保存下自己的心得

全文只是自己的理解内容 ，并非官方语言 ，有错误希望大家及时指出

gojs

gojs 就是基于js的进行一些节点添加 ，更改的一个画图工具  开局需要定义一个画布

js 相当于画笔 然后用js 在画布上进行绘画 对自己索要想展示的内容进行创建

第一步：引入文件：引入go 文件 

<script src="gojs/go-debug_ok.js"></script>

第二步： 创建一个画布的载体(div） 其中需要id=" 画布的名"

第三步 ：创建画布

根据个人习惯 定义一个简介的模板， 

var $ = go.GraphObject.make;  // 为了定义模板的简洁性
      myDiagram =
        $(go.Diagram, "myDiagramDiv",  // 必须命名或引用DIV HTML元素
          {
            initialContentAlignment: go.Spot.Center,// 在中间
            allowDrop: true,  // 接受调色板中的掉落必须是正确的吗must be true to accept drops from the Palette
            "LinkDrawn": showLinkLabel,  // 这个DiagramEvent监听器定义
            "LinkRelinked": showLinkLabel,
            "animationManager.duration": 800, // 略长于默认动画(600ms)
            "undoManager.isEnabled": true  // enable undo & redo 18/5000 // 启用撤销和重做
          });

 设置画布中的值：

initialContentAlignment: go.Spot.Center, //允许用户操作图表的时候使用Ctrl-Z撤销和Ctrl-Y重做快捷键
"undoManager.isEnabled": true, //不运行用户改变图表的规模 allowZoom: false, //画布上面是否出现网格
"grid.visible": true, //允许在画布上面双击的时候创建节点 "clickCreatingTool.archetypeNodeData": { text: "Node" }, //允许使用ctrl+c、ctrl+v复制粘贴 "commandHandler.copiesTree": true, //允许使用delete键删除节点 "commandHandler.deletesTree": true, // dragging for both move and copy "draggingTool.dragsTree": true,

创建模型数据（madel

var myModel = objGo(go.Model);//创建Model对象
        // model中的数据每一个js对象都代表着一个相应的模型图中的元素
        myModel.nodeDataArray = [
            { key: "工厂" },
            { key: "车间" },
            { key: "工人" },
            { key: "岗位" },
        ];
        myDiagram.model = myModel; //将模型数据绑定到画布图上

 创建节点（node）  // 节点就是值得是画布上画出来的图形的形状 图形的样式。下面是我转载的大佬的内同 原文上述有链接 

上面有了画布和节点数据，只是有了一个雏形，但是还没有任何的图形化效果。我们加入一些效果试试    
在gojs里面给我们提供了几种模型节点的可选项：

• Shape:形状——Rectangle（矩形）、RoundedRectangle（圆角矩形），Ellipse（椭圆形），Triangle（三角形），Diamond（菱形），Circle（圆形）等
• TextBlock:文本域（可编辑）
• Picture:图片
• Panel:容器来保存其他Node的集合
  默认的节点模型代码只是由一个TextBlock组件构建成
  我们增加下面一段代码

// 定义一个简单的节点模板
        myDiagram.nodeTemplate =
            objGo(go.Node, "Horizontal",//横向布局的面板
                // 节点淡蓝色背景
                { background: "#44CCFF" },
                objGo(go.Shape,
                    "RoundedRectangle", //定义形状，这是圆角矩形
                    { /* Shape的参数。宽高颜色等等*/figure: "Club", width: 40, height: 60, margin: 4, fill: 'red' },
                    // 绑定 Shape.figure属性为Node.data.fig的值，Model对象可以通过Node.data.fig 获取和设置Shape.figure（修改形状）
                    new go.Binding("figure", "fig"), new go.Binding('fill', 'fill2')),
                objGo(go.TextBlock,
                    "Default Text",  // 默认文本
                    // 设置字体大小颜色以及边距
                    { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
                    //绑定TextBlock.text 属性为Node.data.name的值，Model对象可以通过Node.data.name获取和设置TextBlock.text
                    new go.Binding("text", "name"))
            );

        var myModel = objGo(go.Model);//创建Model对象
        // model中的数据每一个js对象都代表着一个相应的模型图中的元素
        myModel.nodeDataArray = [
            { name: "工厂", fig: 'YinYang', fill2: 'blue' },
            { name: "车间", fig: 'Peace', fill2: 'red' },
            { name: "工人", fig: 'NotAllowed', fill2: 'green' },
            { name: "岗位", fig: 'Fragile', fill2: 'yellow' },
        ];
        myDiagram.model = myModel; //将模型数据绑定到画布图上

（5） 节点连线  就是每一个节点中 从哪里到哪里   

每个类型的节点连线写法大同小异 但是有微妙的不同 具体参考官网中不同类型的连线   树形流程图的节点连线  parent  代表其父元素  其中也可以在这中加图片 ，可以写对应的点击事件。
有了上面的基础，我们可以在画布上面画出我们想要的图形效果了，可是还没有连线。我们知道连线是建立在节点模型的上面的，于是乎我们的Model又分为了以下三种类型：

• Model：最基本的（不带连线，如上面的例子）
• GraphLinksModel ：高级点的动态连线图
• TreeModel：树形图的模型（从例子看好像用的不多）

GraphLinksModel中为model.nodeDataArray提供model.linkDataArray为node节点连线保存数据模型信息，其实也是的一个JSON数组对象，每个线条都有两个属性 “to” 和 “from” 即Node节点的“key”值，两个属性代表两个key表示两个节点间的连线。

我们上面已经写过最基本的Model的例子了，我们再来个带连线的Model的示例

var myModel = objGo(go.GraphLinksModel);
        myModel.nodeDataArray =
            [
                { key: "aaa" ,name: "工厂" },
                { key: "bbb" ,name: "车间"},
                { key: "ccc" ,name: "车间" }
            ];
        myModel.linkDataArray =
            [
                { from: "aaa", to: "bbb" },
                { from: "bbb", to: "ccc" }
            ];
        myDiagram.model = myModel;