网站建设分几步,怎么样在网站文章最后做超链接,手机百度下载app,搜索引擎推广渠道最近做的项目用到了gojs#xff0c;使用了一段时间发现其功能特别强大#xff0c;先记录下目前自己用到的把 1. 初始化画布 myDiagram $(go.Diagram, myDiagramDiv, {}); 2. 定义node 模型 myDiagram.nodeTemplate $(go.Node, Vertical, { locati…最近做的项目用到了gojs使用了一段时间发现其功能特别强大先记录下目前自己用到的把 1. 初始化画布 myDiagram $(go.Diagram, myDiagramDiv, {}); 2. 定义node 模型 myDiagram.nodeTemplate $(go.Node, Vertical, { locationObjectName: ICON, zOrder:1, locationSpot: go.Spot.Center }, new go.Binding(location, loc, go.Point.parse).makeTwoWay(go.Point.stringify), //go.Binding 数据绑定 又分为单向绑定和双向绑定 $(go.Panel, Spot, //go.Panel 面板 相当与div里面的外框把 $(go.Panel, Auto, { name: ICON }, $(go.Shape, //go.Shape 图形 有一些基础的圆 矩形 圆角矩形等 箭头 { fill: null, stroke:null,strokeWidth:2 }, new go.Binding(fill,isHighlighted, function(h) { return h ? #B7D3F2 : transparent; }).ofObject()), $(go.Picture, //图片 {desiredSize: new go.Size(30, 30), margin:3 }, new go.Binding(source, type, nodeTypeImage )) ), $(go.TextBlock,//文本框 { alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight, //go.Spot.TopRight 相当于定位 在右上角 width: 50, height: 30,textAlign: right,stroke: #272822,font:Bold 10px Helvetica}, new go.Binding(text, score)) ), ); 3. 定义线 myDiagram.linkTemplate 4.自定义一些节点模型 , 要使用自定义的节点模型 需要在json里加上 category:自定义节点名, myDiagram.nodeTemplateMap.add(detail, $(go.Node, Horizontal )); 5.节点点击事件 var Select_Port null; myDiagram.addDiagramListener(ObjectSingleClicked, function(e) { //Select_Port e.subject.part.data.key; e.subject.part.data即获取到的data }); 6.画布空白即背景点击事件 myDiagram.addDiagramListener(BackgroundSingleClicked, function(e) { }); 7. 点击放大缩小画布 初始化画布时 可以设置 scale:0.7, minScale:0.4, maxScale:1.4 $(.enlarge).click(function(){ myDiagram.scale0.1; }) $(.narrow).click(function(){ myDiagram.scale-0.1; }) 8. 搜索节点 function searchDiagram() { var input document.getElementById(mySearch); if (!input) return; input.focus(); var regex new RegExp(input.value, i); myDiagram.startTransaction(highlight search); myDiagram.clearHighlighteds(); if (input.value) { var results myDiagram.findNodesByExample({ text: regex }); // 根据需要搜索字段定义 myDiagram.highlightCollection(results); if (results.count 0) myDiagram.centerRect(results.first().actualBounds); } myDiagram.commitTransaction(highlight search); } 搜索效果 通过isHighlighted 字段判断 new go.Binding(fill,isHighlighted, function(h) { return h ? #B7D3F2 : #fff; }).ofObject() 9. 鹰眼功能 div idmyOverviewDiv/div myOverview $(go.Overview, myOverviewDiv, { observed: myDiagram, contentAlignment: go.Spot.Center }); 10. 自定义group模型 myDiagram.groupTemplate $(go.Group, Auto, { zOrder:1, layout: $(go.GridLayout, //网格布局 { //angle: 90, arrangement: go.GridLayout.LeftToRight,isRealtime: false, wrappingWidth:600 }), //wrappingWidth 最宽600px isSubGraphExpanded: false, //默认组是未展开的 locationSpot: go.Spot.Center, subGraphExpandedChanged: function(group) { //子图扩展变化 if (group.isSubGraphExpanded) { // 子图展开 } else { } } }, new go.Binding(location, loc, go.Point.parse).makeTwoWay(go.Point.stringify), $(go.Shape, Rectangle, { fill: #ffffff,strokeWidth: 1 }, new go.Binding(stroke, score, groupborder) ), $(go.Placeholder, { padding: 10}) ) // end Vertical Panel ); // end Group 11. 向 data 里追加字段 原本获取的json没有score字段但是需要用到可以追加进 nodeDataArray里 方便使用 var model myDiagram.model; var arr model.nodeDataArray; for (var i 0; i arr.length; i) { datas arr[i]; datas.score Math.round(Math.random()*100); model.updateTargetBindings(datas); } 12 . 可以给node加toolTip 实现鼠标移入提示想要显示的数据 { // this tooltip shows the name and picture of the kitten toolTip: $(go.Adornment, Auto,) ), {padding:10} ) // end Adornment }) 未完待续。。。 转载于:https://www.cnblogs.com/xiaorong-9/p/7018825.html
