千字小长文只为分享Gojs旋转Demo

一只大加号
1,064 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

gojs是一个用于构建交互式图表和图形的 JavaScript 和 TypeScript 库。GoJS 允许您为您的用户构建各种图表和图形，从简单的流程图和组织结构图到高度具体的工业图、SCADA 和 BPMN 图、像基因图这样的医学图等等。GoJS 使用可定制的模板和布局使构建复杂节点、链接和组的 JavaScript 图表变得容易。

GoJS 为用户交互提供了许多高级功能，例如拖放、复制和粘贴、就地文本编辑、工具提示、上下文菜单、自动布局、模板、数据绑定和模型、事务状态和撤消管理、调色板、概述、事件处理程序、命令和用于自定义操作的可扩展工具系统。

image.png

gojs能实现的效果比较多，相比较其他图形化的插件来说，功能相对于比较齐全，而且作为第一次接触来讲，虽然官网的文档的英文的，但是每个api都提供了具体的小实例，所以学习起来也算是比较方便，通过对一个个小demo就可以学习到完整的一些功能，今天主要就学习了几个简单的基础操作。

实现在区域生成几个操作块，中间的操作块会循环指向周围的几个操作块，每秒会连接附近各个方块，指向对应的方块会变颜色。

image.png

实现的效果大概是一个时钟循环的类似效果。下面一起来看一下代码。

代码解析

与其他图形化插件一样，需要放置一个div作为我们的操作区域

//Html
<div id="myDiagramDiv"
style="width:600px; height:350px; background-color: #DAE4E4;margin:100px auto">
</div>

通过$(go.Diagram, "myDiagramDiv")将配置挂载到myDiagramDiv这个id的div上，有了如下配置

diagram.nodeTemplate 是方块的模板，声明这个模板后，创建多个方块的话，每个方块都会跟随当前模板的配置进行

go.Node 中对每个方块的属性做一些配置

diagram.nodeTemplate 是方块的模板，声明这个模板后，创建多个方块的话，每个方块都会跟随当前模板的配置进行

location声明方块的定位坐标，以第一个方块为中心点

Shape规定方块的形状

fill和stroke是对图形的填充和边框的属性

TextBlock是对内容进行填写，主要是针对边框中需要加的文字

//Html
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true 
}
);
diagram.nodeTemplate =
    $(go.Node, "Auto",
      new go.Binding("location", "loc"),  // convert string into a Point value
      $(
        go.Shape, "RoundedRectangle",
        { fill: "yellow", stroke: "orange", strokeWidth: 2 },
        new go.Binding("fill", "highlight", function(v) { return v ? "pink" : "yellow"; }),
        new go.Binding("stroke", "color").ofModel()
        ),
      $(go.TextBlock,
        { margin: 5 },
        new go.Binding("text", "key"))
    );

  var nodeDataArray = [
    { key: "." , loc: new go.Point(0, 0）, highlight: false},
    { key: "1" , loc: new go.Point(0, 100）, highlight: false},
    { key: "2", loc: new go.Point(100, 0）, highlight: false},
    { key: "3", loc: new go.Point(0, -100） , highlight: false},
    { key: "4", loc: new go.Point(-100, 0）, highlight: false},
  ];
  // var linkDataArray = [
  //   { from: ".", to: "1" }
  // ];
  diagram.model = new go.GraphLinksModel(nodeDataArray);

接下来我们要多少个节点，就可以在节点数组中声明，由于设置了TextBlock中文字的属性是key，所以在key中设置需要填充的文字，loc也在location中做了配置，声明，所以我们就可以生成对应的位置和方块的颜色。

image.png

线条连接

接下来生成连接的线条

var linkDataArray = [
{ from: ".", to: "1" }
];

表示从某个节点连接到对应的节点

  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

对应的挂载方式也要变更

让线条动起来

接下来让线条动起来，然后对应的变色

由于我们在声明了binding监听节点属性的highlight，所以我们设置一个循环函数，在函数中用m.set(node, "highlight", !nodeData.highlight)轮流给每个方块更换heightlight的节点属性，并且用setToKeyForLinkData指向对应的需要连接的方块，linkData我们指定了为m.linkDataArray[0],所以每次都是从第一个开始连接，每次通过min进行自增，循环调用loop函数，达到了旋转连线的效果

let min = 1
  function switchTo() {

    diagram.model.commit(function(m) {
      var linkData = m.linkDataArray[0];
      nextNode = nodeDataArray[min].key
      var nodeData = m.nodeDataArray 
      var node = nodeData[min]
      // console.log(nodeData,'nodeData')
      for(let i of nodeData){
          m.set(i, "highlight", false);
      }
      m.set(node, "highlight", !nodeData.highlight);
      m.setToKeyForLinkData(linkData, nextNode);
    });
    min == 4 ? min = 1 : min++

  }
  function loop() {
    setTimeout(function() { switchTo(); loop(); }, 1000);
  }
  loop();

image.png

avatar
文章
阅读
粉丝