实现效果：（并且鼠标移上去改变背景颜色)
官方案例参考：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" shape
var 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 behavior
button.mouseEnter = function(e, button, prev) {
var shape = button.findObject("ButtonBorder"); // the border Shape
if (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 Shape
if (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 parts
e.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;
}
}),
)
);就此完结，大功告成！！！
扫一扫
2297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
