在jointJS - Rappid中,可以通过修改图形的默认链接名称来自定义连接线的显示。以下是如何实现的步骤:
var app = new joint.ui.JointJSApp();
var CustomLink = joint.dia.Link.extend({
defaults: joint.util.deepSupplement({
attrs: {
'.connection': { stroke: 'black' },
'.marker-target': { fill: 'black', d: 'M 10 0 L 0 5 L 10 10 z' }
},
labels: [
{ position: 0.5, attrs: { text: { text: 'Custom Link' } } }
]
}, joint.dia.Link.prototype.defaults)
});
var CustomLinkView = joint.dia.LinkView.extend({
initialize: function() {
joint.dia.LinkView.prototype.initialize.apply(this, arguments);
this.listenTo(this.model, 'change:customName', this.updateCustomName);
},
updateCustomName: function() {
var customName = this.model.get('customName');
this.$('.custom-name').text(customName);
},
render: function() {
joint.dia.LinkView.prototype.render.apply(this, arguments);
this.updateCustomName();
}
});
app.registerLink('customLink', CustomLink, CustomLinkView);
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 100 },
size: { width: 100, height: 50 },
attrs: { rect: { fill: 'blue' }, text: { text: 'Rect' } }
});
var link = new CustomLink({
source: { id: rect.id },
target: { x: 300, y: 100 },
customName: 'Custom Link'
});
app.graph.addCells([rect, link]);
通过以上步骤,你可以在jointJS - Rappid中更改图形的默认链接名称。你可以根据需要自定义连接线的名称,并在连接线视图中进行相应的更新。
领取专属 10元无门槛券
手把手带您无忧上云