JointJS 将多个自定义连接器绘制到一个元素

JointJS drawing multiple custom connectors to an element

本文关键字：一个 元素 绘制 自定义 连接器 JointJS      更新时间：2023-09-26

我正在使用自己的自定义连接器实现，我希望能够考虑相同元素的其他连接器，以便更好地计算源点和目标点。

joint.connectors.custom = function (sourcePoint, targetPoint, vertices) {
    // I want to calculate the "middle" point while considering other links that might interrupt
    var sourceMiddleX = this.sourceBBox.x + this.sourceBBox.width / 2;
    var d = ['M', sourcePoint.x, sourcePoint.y, targetPoint.x, targetPoint.y];
    return d.join(' ');
};

到目前为止，我在函数上下文和 VElement 下都找不到任何有用的东西。

除非有人有更好的主意，否则我将传递每个模型中每个元素的总链接，这感觉不对。

提前感谢！

JointJS 中的连接器函数被调用，其值为 this 等于一个joint.dia.LinkView实例。每个链接视图都可以访问呈现它的纸张。

var paper = this.paper; // an instance of `joint.dia.Paper`
var graph = this.paper.model; // an instance of `joint.dia.Graph`
var link = this.model; // an instance of `joint.dia.Link`
// an instance of `joint.dia.Element` or `null`
var sourceElement = link.getSourceElement();
var sourceElementLinks = sourceElement
    // an array of `joint.dia.Link` including the link
    // these are connecting the same source element as the link
    ? graph.getConnectedLinks(sourceElement, { outbound: true })
    // the link is not connected to a source element
    : [];
// an instance of `joint.dia.Element` or `null`
var targetElement = link.getTargetElement();
var targetElementLinks = targetElement
    // an array of `joint.dia.Link` including the link
    // these are connecting the same target element as the link
    ? graph.getConnectedLinks(targetElement, { inbound: true })
     // the link is not connected to a target element
    : [];

您还可以检查实现类似逻辑的jumpOver连接器。

相关文章：