gojs拓扑图实现节点外围圆环按钮

实现效果：（并且鼠标移上去改变背景颜色)

官方案例参考：https://gojs.net/latest/samples/radialAdornment.html

珊妹儿这就给大家献上代码：

一、首先引用文件：

<script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./js/gojs/go.js"></script>
<script type="text/javascript" src="./js/gojs/OverviewResizingTool.js"></script>
<script src="./js/gojs/DrawCommandHandler.js"></script>

二、在原有的拓扑图的基础上添加代码js:(这是定义一个圆环，写在init方法外面的)

    //制作一个圆形扇形和环形交叉的“按钮”。//第一个参数是按钮相对于中心放置的角度。//第二个参数是按钮将延伸的扫描角度；//默认情况下，这是90度，好像在整个圆周围正好有四个按钮。go.GraphObject.defineBuilder("SectorButton", function(args) {var angle = go.GraphObject.takeBuilderArgument(args, 0.0, function(a) { return typeof a === "number"; });var sweep = go.GraphObject.takeBuilderArgument(args, 90.0, function(a) { return typeof a === "number"; });// default brushes for "Button" shapevar buttonFillNormal = "whitesmoke";var buttonStrokeNormal = "gray";var buttonFillOver = "#E7B5F4";var buttonStrokeOver = "#C709F7";var buttonFillDisabled = "darkgray";function makeAnnularWedge(angle, sweep, outer, inner) {// 几何体将以（0,0）为中心var p = new go.Point(outer, 0).rotate(angle - sweep / 2);var q = new go.Point(inner, 0).rotate(angle + sweep / 2);var geo = new go.Geometry().add(new go.PathFigure(-outer, -outer))  // 始终确保几何体包括左上角.add(new go.PathFigure(outer, outer))    // 以及整个圆形区域的右下角.add(new go.PathFigure(p.x, p.y)  // 从外角开始，顺时针走.add(new go.PathSegment(go.PathSegment.Arc, angle - sweep / 2, sweep, 0, 0, outer, outer)).add(new go.PathSegment(go.PathSegment.Line, q.x, q.y))  // 然后逆时针旋转.add(new go.PathSegment(go.PathSegment.Arc, angle + sweep / 2, -sweep, 0, 0, inner, inner).close()));return geo;}var geo = makeAnnularWedge(angle, sweep, 80, 40);var pt = new go.Point(60, 0).rotate(angle);var align = new go.Spot(0.5, 0.5, pt.x, pt.y);args.forEach(function(obj) { if (obj instanceof go.GraphObject) obj.alignment = align; });var button =go.GraphObject.make(go.Panel, "Spot",{isActionable: true,  // 需要这样ActionTool才能截获鼠标事件enabledChanged: function(button, enabled) {var shape = button.findObject("ButtonBorder");if (shape !== null) {shape.fill = enabled ? button["_buttonFillNormal"] : button["_buttonFillDisabled"];}},// 为mouseEnter和mouseLeave事件处理程序保存这些值"_buttonFillNormal": buttonFillNormal,"_buttonStrokeNormal": buttonStrokeNormal,"_buttonFillOver": buttonFillOver,"_buttonStrokeOver": buttonStrokeOver,"_buttonFillDisabled": buttonFillDisabled},go.GraphObject.make(go.Shape,  // the border{name: "ButtonBorder",fill: buttonFillNormal,stroke: buttonStrokeNormal,geometry: geo}));//按钮形状内没有GraphObject——它必须作为按钮定义的一部分添加。//这样，对象可以是文本块、形状、图片或任意复杂的面板。// mouse-over behaviorbutton.mouseEnter = function(e, button, prev) {var shape = button.findObject("ButtonBorder");  // the border Shapeif (shape instanceof go.Shape) {var brush = button["_buttonFillOver"];button["_buttonFillNormal"] = shape.fill;shape.fill = brush;brush = button["_buttonStrokeOver"];button["_buttonStrokeNormal"] = shape.stroke;shape.stroke = brush;}};button.mouseLeave = function(e, button, prev) {var shape = button.findObject("ButtonBorder");  // the border Shapeif (shape instanceof go.Shape) {shape.fill = button["_buttonFillNormal"];shape.stroke = button["_buttonStrokeNormal"];}};return button;});

如果你想点击节点显示圆环，就把下面这段代码写在nodeTemplate里：（这是节点的点击事件）isopen是我给后台数据添加的一个字段，用来标识这个节点的圆环是否显示，默认为false不显示，点击节点时，改为true显示；

{click: function(e, node) { if (!node.part.data.isopen) {var oldnode = selectionAdornment.adornedPart;myDiagram.model.setDataProperty(node.part.data, 'isopen', true);if (oldnode) oldnode.removeAdornment("Radial");selectionAdornment.adornedObject = null;} else if (node instanceof go.Node) {selectionAdornment.adornedObject = node;node.addAdornment("Radial", selectionAdornment);myDiagram.model.setDataProperty(node.part.data, 'isopen', false);}}
}

三、圆环内容：（这段代码是写在init方法里的,圆环里的图标是用的svg路径，这里可以去阿里矢量图里去找自己喜欢的图标哦）

//选择节点时显示包含按钮的径向装饰。//这不是模板，因此一次只能显示一个实例。//如果希望每个选定节点都有自己的装饰副本，//设置Node.SelectionOrnMentTemplate并删除“ChangedSelection”DiagramEvent侦听器。var selectionAdornment =_(go.Adornment, "Spot",{ layerName: "Tool" }, // so that it's in front of other Adornments_(go.Panel, "Auto",_(go.Shape, { fill: null, stroke: "dodgerblue", strokeWidth: 4, pickable: false }),_(go.Placeholder, { margin: 2 })),_(go.Panel,_("SectorButton", 0, 120,  // start angle, sweep angle,_(go.Shape, { geometryString:"M716.972231 233.139086C697.346735 233.354682 681.607022 249.430069 681.805554 269.055744L679.305557 907.639068C679.081397 920.4563 685.77341 932.402058 696.820735 938.905003 707.86806 945.407946 721.560442 945.461348 732.658153 939.044769 743.755864 932.62819 750.54085 920.734992 750.416668 907.916402L752.916665 269.333077C753.088927 259.725424 749.36548 250.457047 742.594338 243.638814 735.823196 236.820581 726.580847 233.032988 716.972231 233.13866L716.972231 233.139086ZM512.860971 233.139086C493.23548 233.354691 477.495775 249.430074 477.694308 269.055744L475.194311 907.639068C474.97015 920.4563 481.662164 932.402058 492.709488 938.905003 503.756814 945.407946 517.449196 945.461348 528.546907 939.044769 539.644618 932.62819 546.429604 920.734992 546.305422 907.916402L548.805419 269.333077C548.977681 259.725422 545.254232 250.457042 538.483088 243.638808 531.711942 236.820575 522.469589 233.032984 512.860971 233.13866L512.860971 233.139086ZM315.500004 233.139086C295.874513 233.354691 280.134808 249.430074 280.33334 269.055744L277.833344 907.639068C277.609183 920.4563 284.301197 932.402058 295.348521 938.905003 306.395847 945.407946 320.088229 945.461348 331.18594 939.044769 342.283651 932.62819 349.068636 920.734992 348.944455 907.916402L351.444452 269.333077C351.616714 259.725422 347.893265 250.457042 341.122121 243.638808 334.350975 236.820575 325.108622 233.032984 315.500004 233.13866L315.500004 233.139086ZM419.416661 13.138944 604.583339 13.138944C617.008683 13.138944 627.027783 23.157931 627.027783 35.583317L627.027783 78.694428 868.722219 78.694428C883.347086 78.694428 895.111111 90.458482 895.111111 105.083335L895.111111 146.527744C895.111111 161.152597 883.347086 172.916651 868.722219 172.916651L155.277781 172.916651C140.652928 172.916651 128.888889 161.152597 128.888889 146.527744L128.888889 105.083335C128.888889 90.458482 140.652928 78.694428 155.277781 78.694428L396.972217 78.694428 396.972217 35.583317C396.972217 23.157931 406.991317 13.138944 419.416661 13.138944L419.416661 13.138944ZM177.611108 202.416668 846.388892 202.416668 846.388892 897.722197C846.388892 960.4001 795.927936 1010.861113 733.250005 1010.861113L290.749995 1010.861113C228.072064 1010.861113 177.611108 960.4001 177.611108 897.722197L177.611108 202.416668 177.611108 202.416668Z",width: 20, height: 20 }),{click: function(e, button) {// this is different from CommandHandler.deleteSelection because this// only deletes the one node, not all selected partse.diagram.commit(function(d) {d.remove(button.part.adornedPart);}, "deleted node");}}),_("SectorButton", 120, 120, //眼睛，查看节点明细_(go.Shape, { geometryString: "M780.9 398.9l47.3-47.9c9.1-9.2 9-24.2-0.2-33.3-9.2-9.1-24.2-9-33.3 0.2l-52.8 53.5c-35.5-21.1-78-37.4-124.8-47.3l27.8-85.1c4-12.3-2.8-25.6-15.1-29.7-12.3-4-25.6 2.8-29.7 15.1L570 316.7c-18.5-2-37.6-3.1-57-3.1-19.3 0-38.3 1.1-56.7 3.1l-28.8-88.1c-4-12.3-17.4-19.1-29.7-15.1-12.3 4-19.1 17.4-15.1 29.7l26.4 80.9c-48.5 10.1-92.3 27.2-128.6 49.4l-48.4-49c-9.1-9.2-24.1-9.3-33.3-0.2-9.2 9.1-9.3 24.1-0.2 33.3l43.4 43.9c-43.3 37.3-69.1 83.8-69.1 134.2 0 122.7 152.2 222.1 340 222.1s340-99.4 340-222.1c0.1-51.7-26.8-99.1-72-136.8zM508 678.6c-79 0-143-64-143-143s64-143 143-143 143 64 143 143-64 143-143 143z M515.8 483.8c0-14.2 5.8-27.1 15.2-36.3-7-1.9-14.4-3-22-3-45.8 0-83 37.2-83 83s37.2 83 83 83c45.7 0 82.8-37 83-82.6-7.5 4.3-16.1 6.8-25.4 6.8-28.1-0.1-50.8-22.8-50.8-50.9z",width:20,height:20}),{click: function(e, button) {$("#myModal").modal({backdrop: 'static'});selectionAdornment.adornedPart.removeAdornment("Radial");selectionAdornment.adornedObject = null;var data1 = {"apiMethod":"post","apiName":"新企速递详情查看","apiPath":"/regEnts/show","apiDesc":"新企速递详情查看","name":"poin_webapi_workFlowInsStatistics_activityBar","serviceEnName":"ccrm-mcrm","id":371515,"type":"3","apiEnName":"poin_webapi_workFlowInsStatistics_activityBar"};data1 = JSON.stringify(data1);$("#detailbox").JSONView(eval('(' +data1 + ')'));}}),_("SectorButton", 240, 120,_(go.Shape,{ geometryString: "M640.765177 325.446164 380.623345 325.446164l0 184.083575 260.141832 0L640.765177 325.446164zM566.174342 380.555296 455.013613 380.555296 455.013613 361.056196l111.160729 0L566.174342 380.555296zM657.817552 267.927145 363.298771 267.927145c-25.66145 0-39.089273 22.725584-39.089273 48.729841l0 405.171949c0 25.968441 13.428847 47.861054 39.089273 47.861054l294.51878 0c25.64303 0 38.400588-21.892613 38.400588-47.861054L696.21814 316.65801C696.21814 290.652729 683.460582 267.927145 657.817552 267.927145zM658.306692 731.670072 362.918102 731.670072 362.918102 306.273499 658.306692 306.273499 658.306692 731.670072zM511.010975 64.670905c-245.970064 0-445.357184 199.523219-445.357184 445.620174 0 246.151189 199.38712 445.657013 445.357184 445.657013s445.367417-199.505823 445.367417-445.657013C956.378391 264.194124 756.981039 64.670905 511.010975 64.670905zM510.956739 896.598378c-213.224266 0-386.071939-172.974563-386.071939-386.3073 0-213.368552 172.847673-386.343115 386.071939-386.343115 213.241662 0 386.070916 172.974563 386.070916 386.343115C897.028679 723.623815 724.198401 896.598378 510.956739 896.598378zM640.765177 527.942087 380.423801 527.942087l0 185.134511 260.341377 0L640.765177 527.942087zM566.174342 584.301699 455.213157 584.301699l0-19.101033 110.961184 0L566.174342 584.301699z",width:20,height:20}),{click: function(e, button) {if(!button.part.data.isgroup){if(button.part.data.name == 'ccrm-mcrm'){var jsondata = {"nodes":[{"apiMethod":"post","apiName":"新企速递详情查看","apiPath":"/regEnts/show","apiDesc":"新企速递详情查看","name":"poin_webapi_workFlowInsStatistics_activityBar","serviceEnName":"ccrm-mcrm","id":371515,"type":"3","apiEnName":"poin_webapi_workFlowInsStatistics_activityBar"},{"apiMethod":"post","apiName":"新企速递列表查询","apiPath":"/regEnts/pageQuery","apiDesc":"新企速递列表查询","name":"regEnts_pageQuery","serviceEnName":"ccrm-mcrm","id":371693,"type":"3","apiEnName":"regEnts_pageQuery"},{"apiMethod":"post","apiName":"查询机构对应的一级分行","apiPath":"/regEnts/Lvl1OrgIdQuery","apiDesc":"查询机构对应的一级分行","name":"regEnts_Lvl1OrgIdQuery","serviceEnName":"ccrm-mcrm","id":371888,"type":"3","apiEnName":"regEnts_Lvl1OrgIdQuery"},{"apiMethod":"post","apiName":"新企速递初始化加载日期","apiPath":"/regEnts/loadDate","apiDesc":"新企速递初始化加载日期","name":"regEnts_loadDate","serviceEnName":"ccrm-mcrm","id":370282,"type":"3","apiEnName":"regEnts_loadDate"},{"apiMethod":"get","apiName":"数据字典查询","apiPath":"/pubManagers/paurseMDict/{codeTypes}","apiDesc":"根据数据字典类型获取数据字典","name":"pubManagers_paurseMDict_codeTypes","serviceEnName":"ccrm-mcrm","id":371514,"type":"3","apiEnName":"pubManagers_paurseMDict_codeTypes"},{"apiMethod":"post","apiName":"向上递归查询机构","apiPath":"/pubManagers/getUpOrg","apiDesc":"向上递归查询机构","name":"pubManagers_getUpOrg","serviceEnName":"ccrm-mcrm","id":371692,"type":"3","apiEnName":"pubManagers_getUpOrg"},{"apiMethod":"post","apiName":"营业日期查询","apiPath":"/pubManagers/getDataDate","apiDesc":"获取营业日期","name":"pubManagers_getDataDate","serviceEnName":"ccrm-mcrm","id":371887,"type":"3","apiEnName":"pubManagers_getDataDate"},{"apiMethod":"post","apiName":"权限信息查询","apiPath":"/pubManagers/checkRole","apiDesc":"获取权限信息包括角色机构","name":"pubManagers_checkRole","serviceEnName":"ccrm-mcrm","id":370281,"type":"3","apiEnName":"pubManagers_checkRole"},{"apiMethod":"post","apiName":"M端角色查询","apiPath":"/pubManagers/checkMRole","apiDesc":"M端角色查询","name":"pubManagers_checkMRole","serviceEnName":"ccrm-mcrm","id":371513,"type":"3","apiEnName":"pubManagers_checkMRole"},{"apiMethod":"get","apiName":"币种查询（本外币合计、人民币、外币折美元）","apiPath":"/mSearchForms/getCurrencyThree","apiDesc":"本外币合计、人民币、外币折美元","name":"mSearchForms_getCurrencyThree","serviceEnName":"ccrm-mcrm","id":371691,"type":"3","apiEnName":"mSearchForms_getCurrencyThree"},{"apiMethod":"get","apiName":"币种查询（人民币、本外币合计）","apiPath":"/mSearchForms/getCurrencyRMB","apiDesc":"人民币、本外币合计","name":"mSearchForms_getCurrencyRMB","serviceEnName":"ccrm-mcrm","id":371886,"type":"3","apiEnName":"mSearchForms_getCurrencyRMB"},{"apiMethod":"get","apiName":"币种查询同3（本外币合计、人民币、外币折美元）","apiPath":"/mSearchForms/getCurrencyFour","apiDesc":"本外币合计、人民币、外币折美元","name":"mSearchForms_getCurrencyFour","serviceEnName":"ccrm-mcrm","id":370280,"type":"3","apiEnName":"mSearchForms_getCurrencyFour"},{"apiMethod":"get","apiName":"币种查询同2（本外币合计、人民币、外币折人民币）","apiPath":"/mSearchForms/getCurrencyFive","apiDesc":"本外币合计、人民币、外币折人民币","name":"mSearchForms_getCurrencyFive","serviceEnName":"ccrm-mcrm","id":371512,"type":"3","apiEnName":"mSearchForms_getCurrencyFive"},{"apiMethod":"get","apiName":"币种查询","apiPath":"/mSearchForms/getCurrency","apiDesc":"本外币合计、人民币、外币折人民币、外币折美元","name":"mSearchForms_getCurrency","serviceEnName":"ccrm-mcrm","id":371690,"type":"3","apiEnName":"mSearchForms_getCurrency"},{"apiMethod":"get","apiName":"Ocrm批量状态","apiPath":"/mSearchForms/getBatchState","apiDesc":"批量状态","name":"mSearchForms_getBatchState","serviceEnName":"ccrm-mcrm","id":371885,"type":"3","apiEnName":"mSearchForms_getBatchState"},{"apiMethod":"get","apiName":"Acrm关联系统名称","apiPath":"/mSearchForms/getAcrmSysName","apiDesc":"Acrm关联系统名称","name":"mSearchForms_getAcrmSysName","serviceEnName":"ccrm-mcrm","id":370279,"type":"3","apiEnName":"mSearchForms_getAcrmSysName"},{"apiMethod":"get","apiName":"Acrm批量状态","apiPath":"/mSearchForms/getAcrmBatchState","apiDesc":"获取Acrm批量状态","name":"mSearchForms_getAcrmBatchState","serviceEnName":"ccrm-mcrm","id":371511,"type":"3","apiEnName":"mSearchForms_getAcrmBatchState"}],"lines":[{"lineName":"fbs-jk","from":371689,"to":371515},{"lineName":"fbs-jk","from":371689,"to":371693},{"lineName":"fbs-jk","from":371689,"to":371888},{"lineName":"fbs-jk","from":371689,"to":370282},{"lineName":"fbs-jk","from":371689,"to":371514},{"lineName":"fbs-jk","from":371689,"to":371692},{"lineName":"fbs-jk","from":371689,"to":371887},{"lineName":"fbs-jk","from":371689,"to":370281},{"lineName":"fbs-jk","from":371689,"to":371513},{"lineName":"fbs-jk","from":371689,"to":371691},{"lineName":"fbs-jk","from":371689,"to":371886},{"lineName":"fbs-jk","from":371689,"to":370280},{"lineName":"fbs-jk","from":371689,"to":371512},{"lineName":"fbs-jk","from":371689,"to":371690},{"lineName":"fbs-jk","from":371689,"to":371885},{"lineName":"fbs-jk","from":371689,"to":370279},{"lineName":"fbs-jk","from":371689,"to":371511}]};var data = jsondata.nodes;$.each(data, function (index, el) {var node0 = myDiagram.findPartForKey(el.id);node0.isSelected = true;});}e.diagram.commandHandler.groupSelection();}else{e.diagram.commandHandler.ungroupSelection();}selectionAdornment.adornedPart.removeAdornment("Radial");selectionAdornment.adornedObject = null;}}),));

就此完结，大功告成！！！

gojs拓扑图实现节点外围圆环按钮相关推荐

SAP Spartacus里unit list tree节点collapse all按钮的实现逻辑
如下图所示,点击Collapse按钮: 该动作处理的入口: this.unitTreeService.collapseAll /*** Sets the global toggle state to ...
WinForm------TreeList修改节点图标和按钮样式
转载: https://documentation.devexpress.com/#WindowsForms/DevExpressXtraTreeListTreeList_CustomDrawNode ...
chart 完成拓扑图单节点拖拽不影响其他节点位置
就是做这种的功能,箭头原本是可以动态重复移动的,但不知道哪里问题导致没箭头了,然后补了个edgeSymbol: ['','arrow'], 字段,才增加了箭头. 拖拽某个节点,只有关联到的线条会跟着变 ...
gojs 流程图框架-节点装饰器模板(二)
上一章我们了解了如何使用 gojs 完成基本的节点和连接线的绘制, gojs 中还可以对节点或边进行自由拖动, 编辑等功能; 本章将基于上一章编写的流程图代码, 为这些节点设置装饰器模板完成后的效果 ...
ztree 自定义参数_Ztree节点前加上两个自定义按钮
前言: 在我的权限管理模块遇到了给某些角色加权限的问题,这时就需要实现将每个模块做成树,在每个节点前加上预览和编辑的按钮,这样可以根据数据库的某个字段给每个角色赋权限. 必须必须吐槽的是,这部分的功能 ...
拓扑图节点拖动的实现（学习笔记）
需求: 拓扑图的节点可以拖动当有警报时,在节点上需要提示,直至警报解除拓扑图所在的窗口可以变动大小.当缩小主窗口,拓扑图显示不下时,需要出现滚动条,此时拖动icon到拓扑图边缘,滚动可以跟随移动. ...
cocos creator 学习随笔 day03 节点和组件属性
目录节点本身属性控件属性场景空节点 3D对象 2D对象 UI组件光线特效摄像机地形节点本身属性第一栏为节点名,可修改,前面得勾,是表示是否使用该节点,去掉代表隐藏该节点,但是该节点 ...
gojs实现仿启信宝股权结构关系树图
话不多说,直接干货走起.对你有用的话,请赞实现效果如下图: 实现代码: <!doctype html> <html> <head><meta charset ...
vue实现echarts树图修改节点图片，修改连线颜色，鼠标悬停显示详情，鼠标右键弹出菜单，搜索，导出PNG，高亮，查看节点是否还有子节点，修改树图的展示方式
其实这些效果之前都有用js写过,但是最近在写vue项目,里面的些许语法还是有些不一样的,所以还是写一遍文章总结一下,下次遇到就可以直接用了. 如果想看js写法,可以看我别的文章首先,实现效果入下图: ...

gojs拓扑图实现节点外围圆环按钮

gojs拓扑图实现节点外围圆环按钮相关推荐

最新文章

热门文章