GoJs 自定义Node模板

作者: 寻找无名的特质 | 来源:发表于2020-09-24 06:12 被阅读0次

个人认为方便的自定义模板是GoJs的强大功能之一,使用nodeTemplateMap可以很方便地定义各种类型的模板,只要在数据模型中指定模板的名称(使用category),就可以显示相应的图形。nodeTemplateMap的使用方法如下:

myDiagram.nodeTemplateMap.add("End",
        part
      );

这里,part就是显示的模板,比如,下面是一个part的定义,显示状态图的开始节点:

var partStart=    $(go.Node, "Spot", { desiredSize: new go.Size(75, 75) },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Shape, "Circle",
            {
              fill: "#52ce60", /* green */
              stroke: null,
              portId: "",
              fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
              toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
              cursor: "pointer"
            }),
          $(go.TextBlock, "开始",
            {
              font: "bold 16pt helvetica, bold arial, sans-serif",
              stroke: "whitesmoke"
            })
        );

对应的数据如下:

 {"id":-1, "loc":"155 -138", "category":"Start"}

数据中,category指定了模板类型,loc绑定到图元的位置,这里是双向绑定,也就是图元位置的变化,会改变数据模型中的数据。

如果只定义通用的模板,可以使用:

myDiagram.nodeTemplate=part;

这种情况下,没有指定category的数据都采用缺省模板显示。

相关文章

  • gojs库学习记录(一)

    gojs[https://gojs.net/latest/index.html] 图形库功能非常强大,大家先看它的...

  • iOS自定义代码段模板(CodeSnippets)和文件模板(.

    iOS自定义代码段模板(CodeSnippets)和文件模板(.xctemplate) iOS自定义代码段模板(C...

  • gojs实现自定义图表

    效果图: 1、vuecli创建gojs-demo脚手架工程。 package.json文件中引入gojs组件,vs...

  • AndroidStudio自定义模板

    1、自定义类描述 2、自定义Activity模板 3、模板代码 #if (${PACKAGE_NAME} && $...

  • [iOS]自定义文件模板(.xctemplate)

    自定义文件模板 通过自定义一个ViewController的文件模板来自动生成模版代码 1. Xcode的文件模板...

  • 《PHP Learning》模板引擎

    《PHP Learning》模板引擎 模板处理使用正则处理模板替换规则保存模板编译结果 模板使用 自定义模板引擎 ...

  • gojs

    Gojs项目文档 简介: Gojs 用canvas 作图,一般用来绘制流程图,关系图,表示节点与节点之间的关系,节...

  • 扩展模版系统

    现在您已经对模板系统的内部有了更多的了解,我们来看看如何使用自定义代码来扩展系统。 大多数模板自定义都以自定义模板...

  • iOS 自定义文件模板和代码段

    使用自定义文件模板和代码段来写代码可以大大提高写代码的效率。 自定义类模板分成两步, 添加模板文件 文件模板路径 ...

  • node.js

    自定义命令依赖node路径切换 which node //查看当前node安装路径 /Users/zhusuy...

网友评论

    本文标题:GoJs 自定义Node模板

    本文链接:https://www.haomeiwen.com/subject/jbtayktx.html