1

Rappid（JointJS 的付费版本）中有一个功能，它允许您从元素的工具箱中拖动一个按钮，并将该元素连接到另一个元素，然后释放鼠标按钮。
我想用 JointJS 核心库来实现这个功能。我设法使用 elementTools 创建了一个工具箱，并添加了两个按钮，一个用于删除元素，一个用于此拖放和连接功能。
带有元素工具箱 的元素图片问题是拖动按钮仅在我单击按钮时才会触发。它不允许我拖动并拥有鼠标的 x、y 坐标。在stackoverflow中有一个类似的问题没有得到解答：
为每个对象JointJS创建一个ToolElement

这是我的按钮片段：

const InfoButton = joint.elementTools.Button.extend({
        name: 'info-button',
        options: {
            focusOpacity: 0.5,
            distance: 60,
            action: function (evt: JQueryEventObject, elementView, buttonView) {
                // alert('View id: ' + this.id + '\n' + 'Model id: ' + this.model.id);
                const link = new Models.SequenceFlow();
                link.set('source', { id: elementView.model.get('id') });
                link.set('target', new joint.g.Point(evt.pageX, evt.pageY));
                // const alev = jQuery.Event()
                // evt.preventDefault();
                // paper.trigger('AliEvt', evt);
                link.addTo(model);
                // link.se(this.model);
                // link.target(new joint.g.Point(0, 0));
            },
            markup: [
                {
                    tagName: 'circle',
                    selector: 'button',
                    attributes: {
                        r: 7,
                        fill: '#001DFF',
                        cursor: 'pointer',
                    },
                },
                {
                    tagName: 'path',
                    selector: 'icon',
                    attributes: {
                        d: 'M -2 4 2 4 M 0 3 0 0 M -2 -1 1 -1 M -1 -4 1 -4',
                        fill: 'none',
                        stroke: '#FFFFFF',
                        'stroke-width': 2,
                        'pointer-events': 'none',
                    },
                },
            ],
        },
});

const infoButton = new InfoButton();

const toolsView = new joint.dia.ToolsView({
    name: 'basic-tools',
    tools: [removeButton, boundaryTool, infoButton],
});

任何帮助，将不胜感激。

4

0 回答 0