当前位置: 首页>前端>正文

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;

 


https://www.xamrdz.com/web/2x21962372.html

相关文章: