在PaperJS中，当鼠标从项目移开时，如何将onMouseUp事件链接到onMouseDown事件的起源

Question

在我的PaperJS项目中，我有一堆具有与之关联的圆形Path的对象。 这些路径均具有鼠标功能。

我想做的是在单击一个圆圈，拖动鼠标并在另一个圆圈上释放鼠标按钮时在两个圆圈之间创建链接。

为此，我使用PaperJS onMouseDown和onMouseUp事件，实现这样的目标内：

function CircleObj() { // the object constructor
   this.circle = new Path(...);
   this.circle.onMouseDown = function(event) {
      //eventstuff
   }
}

其中this.circle是圆Path。

问题是，当我释放鼠标按钮时，它不再链接到圆上，因此onMouseUp函数直到再次单击实际的圆时才执行。 因此，这不允许您在另一个圆上拖放，因为'drop'操作不会注册。

如何注册onMouseUp事件并将其链接到发生onMouseDown事件的圈子？

Answer 1

这有点复杂，但是通过将问题封装在对象中避免了全局变量。 在草图版本的底部注意new Tool() －仅在sketch.paperjs.org中必需，以便覆盖处理程序草图安装。

function Circles() {
    this.group = new Group();
    this.circleNumber = 0;
    this.downItem = null;

    view.on('mousedown', function(e) {
        var hit = this.group.hitTest(e.point);
        // if we didn't hit this group add a circle
        if (!hit) {
            var circle = new Path.Circle({
                center: e.point,
                radius: 20,
                fillColor: 'red',
                name: 'circle' + this.circleNumber
            });
            this.group.addChild(circle);
            this.circleNumber++; 
            this.downItem = circle;
            return;
        }
        // we hit a circle
        this.downItem = hit.item;
    }.bind(this));

    view.on('mouseup', function(e) {
        var hit = this.group.hitTest(e.point);
        // if we hit a circle and it's not the same
        // as the downItem circle
        if (hit && hit.item !== this.downItem) {
            var line = new Path.Line({
                from: this.downItem.position,
                to: hit.item.position,
                strokeColor: 'black',
                strokeWidth: 20,
                strokeCap: 'butt'
            });
            line.sendToBack();
            this.downItem = null;
        }
    }.bind(this));
}

circles = new Circles();

如果您想玩的话，这是一个草图 。

Answer 2

如果您希望将鼠标事件与构造函数联系在一起，我认为将初始点保留在全局变量中是最简单的。 它肯定比在视图中添加和删除“ Tool Event ”并检查命中对象是否是圆形而不是直线或其他对象干净。

var firstPoint = null;

function circleObj(p) {
    this.circle = new Path.Circle({
       center: p,
       radius: 20,
       fillColor: 'red'
    });
    this.circle.onMouseDown = function(event) {
            firstPoint = this.position;
    }
    this.circle.onMouseUp = function(event) {
        if (firstPoint !== null){
            var path = new Path.Line({
                from: firstPoint,
                to: this.position,
                strokeColor: 'black',
                strokeWidth: 40,
                strokeCap: 'butt'
            });
            path.sendToBack();
            firstPoint = null;
        }
    }
}

function onMouseDown(event){
    if (!event.item){
        circleObj(event.point);
        firstPoint = null;
    }
}