使用JointJS库构建图形,这是一个很好的库,但文档很少。
http://jointjs.com/demos/fsa
如上页面,当鼠标移动到链接上时,链接上会有一个“删除”图标,可以单击该图标删除链接,我想禁用链接上的“删除”操作,请指教。
.link-tools .tool-remove { display: none }
。<path class="connection"/>
<path class="marker-source"/>
<path class="marker-target"/>
<path class="connection-wrap"/>
<g class="labels" />
<g class="marker-vertices"/>
<g class="marker-arrowheads"/>
<g class="link-tools" />
var MyLink = joint.dia.Link.extend({
markup: '<path class="connection"/><path class="marker-target"/><g class="labels" />'
});
这是我修改JointJS版本1.0.2 CSS的替代方法。
这个技巧的好处是我们可以有不同的链接样式,而且更加灵活。
var link = new joint.dia.Link({
// other attributes
attrs: {
//other attributes
'.link-tools': {
display: 'none'
}
}
});
我们还可以在论文中将其设置为默认值,这是另一个示例:
var paper = new joint.dia.Paper({
// other configs..
defaultLink: new joint.dia.Link({
attrs: {
//other attributes
'.link-tools': {
display: 'none'
}
}
})
});
正如Dave所指出的那样,这是在CSS中完成的,但您需要为选项添加额外的内容。CSS的条目如下:
.link-tools .tool-remove { display: none }
.link-tools .tool-options { display: none }
.link .mark-errors { display: none; }
能够帮到你。 - Michael Vashchinsky经过一段时间后,我认为在这篇文章中添加一个更新的答案会很有用。
我们需要做的是将ToolsView定义为链接视图。
const verticesTool = new joint.linkTools.Vertices();
const segmentsTool = new joint.linkTools.Segments();
const sourceArrowheadTool = new joint.linkTools.SourceArrowhead();
const targetArrowheadTool = new joint.linkTools.TargetArrowhead();
const sourceAnchorTool = new joint.linkTools.SourceAnchor();
const targetAnchorTool = new joint.linkTools.TargetAnchor();
const boundaryTool = new joint.linkTools.Boundary();
const removeButton = new joint.linkTools.Remove();
const toolsView = new joint.dia.ToolsView({
tools: [
verticesTool, segmentsTool,
sourceArrowheadTool, targetArrowheadTool,
sourceAnchorTool, targetAnchorTool,
boundaryTool, removeButton
]
});
接下来,您需要在悬停或离开链接时添加或删除此工具视图;例如如下所示。当然,您可以使用其他逻辑根据需要显示工具视图,而不是在悬停时。
paper.on({
'blank:mouseover': ()=>{
paper.removeTools();
},
'link:mouseenter': (linkView)=>{
linkView.addTools(toolsView);
}
});
new joint.dia.paper({
defaultLink: function (cellView, magnet) {
return new joint.shapes.standard.Link();
},
});
更多信息请参考: [JointJS链接工具] [1]: https://resources.jointjs.com/tutorial/link-tools
我看到箭头有一个带有marker-arrowheads
类的g
元素。
所以:
.link .marker-arrowheads { display: none; }
应该这样做。
请注意,还有一个带有marker-vertices
类的元素。