在画布中移动已经创建的矩形

Question

我试图通过单击并拖动对象来移动画布中的项目。我正在使用paperjs。这是我的代码：

我画一个矩形如下：

 var rect = new paper.Path.Rectangle(new paper.Point(100, 100), new  paper.Point(200, 250));
    rect.strokeColor = 'black';
    rect.fillColor = 'red';
    rect.strokeWidth = 5;

为了移动矩形，我创建了一个Tool 并将事件附加到它。

onSelectShape(){
        const self = this;
        const hitOptions = {
          segments: true,
            stroke: true,
            fill: true,
      tolerance: 5
        };


        const toolSelect = new paper.Tool();
        toolSelect.activate();


        let segment, path;
        toolSelect.onMouseDown = function(event) {

            const hitResult = self.project.hitTest(event.point, hitOptions);
      console.log(hitResult);
            if (!hitResult){
                return;
            }
            if (hitResult) {
                path = hitResult.item;
            }

        };

        toolSelect.onMouseMove = function(event) {
            self.project.activeLayer.selected = false;
            if(event.item){
                event.item.selected = true;
            }
        };

        toolSelect.onMouseDrag = function(event) {

            if (path) {

                path.position += event.delta;
            }
        };
    }

这是完整的Stackblitz 链接。我不确定为什么它不起作用。任何帮助将不胜感激

Answer 1

第 31 行更改

const self = this; 

到

const self = paper.project;

第 69 行更改

path.position += event.delta;

到

path.position = path.position.add(event.delta);