• 日期: 2024-08-17 23:32:33
  • 标签: 常规

{/'title/':/'GoJS 节点模板使用端口：创建流程图/',/'description/':/'使用端口改造GoJS中的节点模板，实现流程图功能，并演示如何添加节点模板和配置端口。/',/'keywords/':/'GoJS, 节点模板, 端口, 流程图, 图形化编程/',/'content/':/'///'let myPalette = $(go.Palette, this.$refs.myPaletteDiv1, // must name or refer to the DIV HTML element { //'animationManager.duration//': 800, // slightly longer than default (600ms) animation nodeTemplateMap: myDiagram.nodeTemplateMap, // share the templates used by myDiagram // nodeTemplate: myDiagram.nodeTemplate, // share the templates used by myDiagram model: new go.GraphLinksModel([ // specify the contents of the Palette { category: //'Start//', text: //'Start//', imageSrc: require(//'./1.png//'), ports: [ { portId: //'in//', color: //'blue//' }, // 定义一个入链接端口 { portId: //'out//', color: //'green//' } // 定义一个出链接端口 ] }, { category: //'Command//', text: //'Command//', imageSrc: require(//'./2.png//'), ports: [ { portId: //'in//', color: //'blue//' }, { portId: //'out//', color: //'green//' } ] }, { category: //'End//', text: //'End//', imageSrc: require(//'./3.png//'), ports: [ { portId: //'out//', color: //'green//' } ] } ]) })使用这样的端口，怎么改造下面的 myDiagram.nodeTemplateMap.add(//'//', $(go.Node, //'Spot//', this.nodeStyle(), $(go.Panel, //'Auto//', $(go.Picture, { desiredSize: new go.Size(60, 60), // 设置图片大小 opacity: 0.5, margin: 8 // 设置图片边距 }, new go.Binding(//'source//', //'imageSrc//')), // 设置图片的源路径 $(go.TextBlock, //'command//', { font: //'bold 11pt Helvetica, Arial, sans-serif//', stroke: //'whitesmoke//', margin: 8, maxSize: new go.Size(160, NaN), wrap: go.TextBlock.WrapFit, editable: true, visible: false }, new go.Binding(//'text//').makeTwoWay()) ), $(go.Panel, //'Vertical//', // 左侧端口 $(go.Panel, //'Spot//', $(go.Shape, //'Circle//', { width: 8, height: 8, fill: //'blue//', portId: //'in//', alignment: go.Spot.Left, fromLinkable: true, // fromSpot: go.Spot.All, toLinkable: true, // toSpot: go.Spot.All }), $(go.Shape, //'LineH//', { width: 30, height: 1, stroke: //'black//', strokeWidth: 1 }) ), // 右侧端口 $(go.Panel, //'Spot//', $(go.Shape, //'Circle//', { width: 8, height: 8, fill: //'green//', portId: //'out//', alignment: go.Spot.Right, fromLinkable: true, // fromSpot: go.Spot.All, toLinkable: true, // toSpot: go.Spot.All }), $(go.Shape, //'LineH//', { width: 30, height: 1, stroke: //'black//', strokeWidth: 1 }) ) ) ) )内容：要改造myDiagram.nodeTemplateMap.add的部分，以适应使用端口。首先，需要将myDiagram.nodeTemplateMap.add的第一个参数修改为节点的category。然后，需要在节点模板中添加端口定义。具体代码如下：javascriptmyDiagram.nodeTemplateMap.add(//'Start//', $(go.Node, //'Spot//', this.nodeStyle(), $(go.Panel, //'Auto//', $(go.Picture, { desiredSize: new go.Size(60, 60), opacity: 0.5, margin: 8 }, new go.Binding(//'source//', //'imageSrc//')), $(go.TextBlock, //'Start//', { font: //'bold 11pt Helvetica, Arial, sans-serif//', stroke: //'whitesmoke//', margin: 8, maxSize: new go.Size(160, NaN), wrap: go.TextBlock.WrapFit, editable: true, visible: false }, new go.Binding(//'text//').makeTwoWay()) ), $(go.Panel, //'Vertical//', $(go.Panel, //'Spot//', $(go.Shape, //'Circle//', { width: 8, height: 8, fill: //'blue//', portId: //'in//', alignment: go.Spot.Left, fromLinkable: true, toLinkable: true }), $(go.Shape, //'LineH//', { width: 30, height: 1, stroke: //'black//', strokeWidth: 1 }) ), $(go.Panel, //'Spot//', $(go.Shape, //'Circle//', { width: 8, height: 8, fill: //'green//', portId: //'out//', alignment: go.Spot.Right, fromLinkable: true, toLinkable: true }), $(go.Shape, //'LineH//', { width: 30, height: 1, stroke: //'black//', strokeWidth: 1 }) ) ) ));myDiagram.nodeTemplateMap.add(//'Command//', $(go.Node, //'Spot//', this.nodeStyle(), $(go.Panel, //'Auto//', $(go.Picture, { desiredSize: new go.Size(60, 60), opacity: 0.5, margin: 8 }, new go.Binding(//'source//', //'imageSrc//')), $(go.TextBlock, //'Command//', { font: //'bold 11pt Helvetica, Arial, sans-serif//', stroke: //'whitesmoke//', margin: 8, maxSize: new go.Size(160, NaN), wrap: go.TextBlock.WrapFit, editable: true, visible: false }, new go.Binding(//'text//').makeTwoWay()) ), $(go.Panel, //'Vertical//', $(go.Panel, //'Spot//', $(go.Shape, //'Circle//', { width: 8, height: 8, fill: //'blue//', portId: //'in//', alignment: go.Spot.Left, fromLinkable: true, toLinkable: true }), $(go.Shape, //'LineH//', { width: 30, height: 1, stroke: //'black//', strokeWidth: 1 }) ), $(go.Panel, //'Spot//', $(go.Shape, //'Circle//', { width: 8, height: 8, fill: //'green//', portId: //'out//', alignment: go.Spot.Right, fromLinkable: true, toLinkable: true }), $(go.Shape, //'LineH//', { width: 30, height: 1, stroke: //'black//', strokeWidth: 1 }) ) ) ));myDiagram.nodeTemplateMap.add(//'End//', $(go.Node, //'Spot//', this.nodeStyle(), $(go.Panel, //'Auto//', $(go.Picture, { desiredSize: new go.Size(60, 60), opacity: 0.5, margin: 8 }, new go.Binding(//'source//', //'imageSrc//')), $(go.TextBlock, //'End//', { font: //'bold 11pt Helvetica, Arial, sans-serif//', stroke: //'whitesmoke//', margin: 8, maxSize: new go.Size(160, NaN), wrap: go.TextBlock.WrapFit, editable: true, visible: false }, new go.Binding(//'text//').makeTwoWay()) ), $(go.Panel, //'Vertical//', $(go.Panel, //'Spot//', $(go.Shape, //'Circle//', { width: 8, height: 8, fill: //'green//', portId: //'out//', alignment: go.Spot.Right, fromLinkable: true, toLinkable: true }), $(go.Shape, //'LineH//', { width: 30, height: 1, stroke: //'black//', strokeWidth: 1 }) ) ) ));这样，myDiagram.nodeTemplateMap中的节点模板就适应了使用端口。/'}/


原文地址: https://www.cveoy.top/t/topic/psxz 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录