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

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