Question

我是jointjs的新手。今天我有一个小例子如下：

我有一个开始活动

var startEndActivity = function (x, y, name, fillColor, textColor, size) {
fillColor = fillColor || '#007FBE';
textColor = textColor || "#000";
size = size || { width: 100, height: 40 };
var rect = new joint.shapes.basic.Rect({
    position: { x: x, y: y },
    size: size,
    attrs: {
        rect: { fill: fillColor, rx: 5, ry: 5, 'stroke-width': 1, stroke: '#002F5D' },
        text: {
            text: name, fill: textColor,
            'font-size': 14, 'font-family': 'sans-serif'
        }
    }
});
graph.addCell(rect);
return rect;}

我有条件活动

var activityDecision = function (x, y, name, fillColor, textColor, size{
fillColor = fillColor || '#BF664C';
textColor = textColor || "#080808";
size = size || { width: 200, height: 60 };
var node = new joint.shapes.basic.Rhombus({
    position: { x: x, y: y },
    size: size,
});
node.attr({
    rect: { fill: fillColor, 'stroke-width': 1, stroke: 'white' },
    text: {
        text: name, fill: textColor,
    }
});
graph.addCell(node);
return node;}

我想点击开始活动，我可以绘制一个箭头来连接2个元素。非常感谢你

Answer 1

我所知道的最常见的方法是在元素上使用端口。这个链接应该让你开始这条路线：

WORKING WITH PORTS

如果您希望将整个元素设置为端口，则需要查看“磁性”属性。此链接应该可以帮助您开始研究您需要的内容（尤其是第一个答案）：

How to interactively create links in JointJS

Answer 2

我找到了解决方法。非常感谢。只需添加更多这样的属性

el.attr('rect/magnet', true).attr('text/pointer-events', 'none');

Answer 3

function create(type) {
var link = new joint.dia.Link({
            source: { x: 10, y: 20 },
            target: { x: 350, y: 20 },
            attrs: {}
        });
        link.prop({...});
        link.addTo(graph)
}
//init connection:
new joint.dia.Link({
    source: { id: 'source-id' },
    target: { id: 'target-id', port: 'port_id'}
});

Answer 4

要连接两个元素，您必须使用Ports（documentation）：

我最好的建议是通过查看JointJS源代码来学习如何实现端口，作为对象的参考查找： joint.shapes.devs.Model （live demo +里面的源代码）

类似的东西：

var myRect = joint.shapes.devs.Model.extend({
    portMarkup: '<circle class="port-body myCustomClass"/>',
    defaults: _.defaultsDeep({    
        type: 'myRect',
    }, joint.shapes.basic.Generic.prototype.defaults),
});

并在startEndActivity函数内部将var rect更改为：

var startRect = new myRect({
    position: { x: x, y: y },
    size: size,
    attrs: {
        rect: { fill: fillColor, rx: 5, ry: 5, 'stroke-width': 1, stroke: '#002F5D' },
        text: {
            text: name, fill: textColor,
            'font-size': 14, 'font-family': 'sans-serif'
        }
    },
    ports: {
        groups: {
            'out': {
                position: {
                    name: 'right'
                },
                attrs: {
                    '.port-label': {
                        fill: '#000'
                    },
                    '.port-body': {
                        fill: '#fff',
                        stroke: '#000',
                        r: 10,
                        magnet: true
                    }
                },
                label: {
                    position: {
                        name: 'right',
                        args: {
                            y: 10
                        }
                    }
                }
            }
        }
});

为第二个元素做同样的事情。

连接2个元素jointjs

4 个答案: