GoJs节点绘图模板拓展

GoJs节点绘图模板拓展

前言

前文已经提到go.Node中是对节点内部分一个布局和显示内容进行了一个介绍。包括集中布局的属性，包括一些属性的动态配置，根据获取到的节点数据进行判断某些元素的显示隐藏。这次以节点为一个整体介绍一些节点的属性

go.Node的属性配置

{
    isShadowed: true, // 设置是否显示节点阴影
    shadowOffset: new go.Point(5, 5), //设置节点阴影的偏移
    shadowColor: '#67B73C', //节点偏移的颜色
    movable:false,//设置节点是否可以拖动
    deletable:false,//设置节点是够可以通过键盘的Delete按键删除
    selectable: false, //设置节点是否可以选择
    selectionAdorned:false, //设置节点在选中的时候是否显示边框
    copyable:false, //设置节点是够可以通过ctrl+c进行复制
    location, //设置节点的坐标位置
    minLocation: new go.Point(0, 0), //设置节点的最小坐标位置
    maxLocation: new go.Point(100, 100), //设置节点的最大坐标位置
    isSelected:true, //设置节点在加载成功之后是否能够被选中
    reshapable:true, // 设置接地那内部的go.shape绘图模板是够可以拖动改变大小
    resizable: true, // 设置节点是够可以拖动改变节点大小
    resizeCellSize: new go.Size(10, 10), //设置拖动改变大小的拖动范围
    rotatable:true, // 设置节点是够可以旋转
    fromSpot: go.Spot.RightCenter, //设置起始点的节点连接位置
    toSpot: go.Spot.LeftCenter, //设置结束点的节点连接位置
    desiredSize: new go.Size(160, 40), //设置节点的尺寸大小
    avoidable:true,  // 设置连线和节点是否不重合,如果设置不重合,则需要和go.Link的Link.routing 为AvoidsNodes才会生效
    avoidableMargin: new go.Margin(10,10,10,10) // 如果设置连线和节点不重合,则连线个节点错开的边距 
  },

从最开始选择gojs的时候就提到，选择gojs的很大原因是因为gojs的交互特别的好。在上面设置的属性中便有是够可以选择的selectable和是够可以拖动的movable。并且就是当选中节点的时候我们可以通过键盘中的ctrl+c对节点进行复制，然后ctrl+v进行粘贴。当然如果在对节点的添加错误的时候，我们也可以通过键盘的Delete对节点进行删除操作。

多个节点端口和手动添加节点端口之间连线

在实际的开发需求中，可能会遇到节点需要多个起始端口的情况，并且有些节点的之间的连线需要手动进行连接。

this.myDiagram.nodeTemplate = $$(
    go.Node,
    "Auto",
    $$(go.Shape, "Rectangle", { fill: "#67B73c", stroke: "#FF9900" }),
    $$(
      go.Panel,
      "Table",
      { width: 100, height: 100 },
      $$(go.RowColumnDefinition, { column: 0, alignment: go.Spot.Left }),
      $$(go.RowColumnDefinition, { column: 2, alignment: go.Spot.Right }),
      $$(
        go.TextBlock, // the node title
        {
          column: 0,
          row: 0,
          columnSpan: 3,
          alignment: go.Spot.Center,
          font: "bold 10pt sans-serif",
          stroke: "#FF9900",
          margin: new go.Margin(4, 2),
        },
        new go.Binding("text", "text")
      ),
      $$(
        go.Panel,
        "Horizontal",
        { column: 0, row: 1 },
        $$(go.Shape, "Circle", {
          width: 10,
          height: 10,
          portId: "A",
          fill: "#FF0000",
          toSpot: go.Spot.Left,
          toLinkable: true,
          toMaxLinks: 1,
        }),
        $$(go.TextBlock, "A")
      ),
      $$(
        go.Panel,
        "Horizontal",
        { column: 0, row: 2 },
        $$(go.Shape, "Circle", {
          width: 10,
          height: 10,
          portId: "B",
          fill: "#FF0000",
          toSpot: go.Spot.Left,
          toLinkable: true,
          toMaxLinks: 1,
        }),
        $$(go.TextBlock, "B")
      ),
      $$(
        go.Panel,
        "Horizontal",
        { column: 2, row: 1 },
        $$(go.TextBlock, "C"),
        $$(go.Shape, "Circle", {
          width: 10,
          height: 10,
          portId: "C",
          fill: "#00FF00",
          fromSpot: go.Spot.Right,
          fromLinkable: true,
        })
      ),
      $$(
        go.Panel,
        "Horizontal",
        { column: 2, row: 2 },
        $$(go.TextBlock, "D"),
        $$(go.Shape, "Circle", {
          width: 10,
          height: 10,
          portId: "D",
          fill: "#00FF00",
          fromSpot: go.Spot.Right,
          fromLinkable: true,
        })
      )
    )
  );

因为设置了每个端点只能连接一次，所以在第二D出发口拖出连线的时候，只有B口提供连接选项，A口已经不提供连接选项了。

总结

在实际项目中，有很多时候需要用到更加复杂的节点操作，包括拖拽、复制、粘贴、多端口连接并且手动连线的操作。因此对节点操作技巧做了一个拓展。

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!