首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在jointJS - Rappid中更改图形的默认链接名称

在jointJS - Rappid中,可以通过修改图形的默认链接名称来自定义连接线的显示。以下是如何实现的步骤:

  1. 首先,确保已经引入了jointJS和Rappid的相关库文件。
  2. 创建一个新的Rappid应用程序实例:
代码语言:javascript
复制
var app = new joint.ui.JointJSApp();
  1. 定义一个自定义的连接线模型,包括连接线的名称和其他属性:
代码语言:javascript
复制
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)
});
  1. 创建一个自定义的连接线视图,用于渲染连接线:
代码语言:javascript
复制
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();
    }
});
  1. 注册自定义连接线模型和视图:
代码语言:javascript
复制
app.registerLink('customLink', CustomLink, CustomLinkView);
  1. 创建一个新的图形:
代码语言:javascript
复制
var rect = new joint.shapes.basic.Rect({
    position: { x: 100, y: 100 },
    size: { width: 100, height: 50 },
    attrs: { rect: { fill: 'blue' }, text: { text: 'Rect' } }
});
  1. 创建一个新的连接线,使用自定义的连接线模型:
代码语言:javascript
复制
var link = new CustomLink({
    source: { id: rect.id },
    target: { x: 300, y: 100 },
    customName: 'Custom Link'
});
  1. 将图形和连接线添加到画布中:
代码语言:javascript
复制
app.graph.addCells([rect, link]);

通过以上步骤,你可以在jointJS - Rappid中更改图形的默认链接名称。你可以根据需要自定义连接线的名称,并在连接线视图中进行相应的更新。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 一键锁定计算机快捷方式,还原win8系统创建一键锁定计算机的快捷方式的技巧…

    今天和大家分享一下关于对win8系统创建一键锁定计算机的快捷方式设置的方法,在使用win8系统的过程中经常不知道如何去对win8系统创建一键锁定计算机的快捷方式进行设置,有什么好的办法去设置win8系统创建一键锁定计算机的快捷方式呢?在这里小编教你只需要1、首先在桌面上的空白处鼠标右击选择“新建–快捷方式”,然后在弹出来的创建快捷方式界面中,在“请键入对象的位置”框中输入:rundll32.exe user32.dll,Lockworkstation,并点击“下一步”; 2、然后输入快捷方式名称,名称可以自己写,比如”锁定目标“,创建完成之后点击完成,这时桌面就会出现一个“锁定目标”的快捷方式;就搞定了。下面小编就给小伙伴们分享一下对win8系统创建一键锁定计算机的快捷方式进行设置的详细步骤:

    01

    win10键锁定计算机,win10系统创建一键锁定计算机的快捷方式的操作方法

    很多win10用户在使用电脑的时候,会发现win10系统创建一键锁定计算机的快捷方式的的现象,根据小编的调查并不是所有的朋友都知道win10系统创建一键锁定计算机的快捷方式的的问题怎么解决,不会的朋友也不用担心,下面我就给大家讲解一下win10系统创建一键锁定计算机的快捷方式的的少许解决办法,其实步骤很简单,只需要1、首先在桌面上的空白处鼠标右击选择“新建–快捷方式”,然后在弹出来的创建快捷方式界面中,在“请键入对象的位置”框中输入:rundll32.exe user32.dll,Lockworkstation,并点击“下一步”; 2、然后输入快捷方式名称,名称可以自己写,比如”锁定目标“,创建完成之后点击完成,这时桌面就会出现一个“锁定目标”的快捷方式;这样的方式进行电脑操作,的步骤就可以搞定了,还有不知道win10系统创建一键锁定计算机的快捷方式怎么解决的朋友赶快来学习一下吧!

    01
    领券