Question

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

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

为此，我使用PaperJS onMouseDown和onMouseUp事件，在对象内部实现如下：

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

其中this.circle是圆圈路径。

问题在于，当我释放鼠标按钮时，它不再链接到圆圈，因此onMouseUp功能在我再次点击实际圆圈之前不会执行。因此，这不允许您拖放到另一个圆圈上，因为“掉落”了行动没有注册。

我如何拥有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();

如果您想玩它，可以使用sketch。

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;
    }
}

在PaperJS中，当鼠标离开项目

2 个答案: