jointjs - 如何使纸张可拖动

Question

如果纸张对于显示的 div 来说太大，我想让纸张可拖动。

我尝试了空白:pointerdown 和pointerup 事件的论文，但不能只跟随鼠标移动。我还尝试通过 jquery 使纸张元素可拖动，但似乎没有任何作用......

有没有办法做到这一点？

Answer 1

这可以通过 JointJS 事件和文档事件的组合来实现。图形显示封装在 div 中:

<div id='diagram'></div>

然后为 JointJS 添加事件处理程序，首先是 pointerdown我们存储拖动开始位置的事件:

paper.on('blank:pointerdown',
    function(event, x, y) {
        dragStartPosition = { x: x, y: y};
    }
);

然后拖动结束(pointerup)，当我们删除存储位置的变量时(它也作为是否正在进行事件拖动的标志):

paper.on('cell:pointerup blank:pointerup', function(cellView, x, y) {
    delete dragStartPosition;
});

由于 JointJS 没有暴露“纸指针移动”事件，我们需要使用 mousemove文件事件。例如，使用 JQuery:

$("#diagram")
    .mousemove(function(event) {
        if (dragStartPosition)
            paper.translate(
                event.offsetX - dragStartPosition.x, 
                event.offsetY - dragStartPosition.y);
    });

我们获取拖动开始坐标和当前指针位置，并使用 paper.translate() 更新纸张位置。称呼。

警告:如果您缩放纸张(使用 paper.scale() )，您还必须缩放拖动的起始位置:

var scale = V(paper.viewport).scale();
dragStartPosition = { x: x * scale.sx, y: y * scale.sy};

调用 paper.translate()然后将更新到正确的位置。