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

时间:2018-09-09 18:37:39

标签: canvas paperjs

我试图通过单击并拖动对象来移动画布中的项目。我正在使用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链接。我不确定为什么它不起作用。任何帮助将不胜感激

1 个答案:

答案 0 :(得分:0)

第31行更改

const self = this; 

const self = paper.project;

第69行更改

path.position += event.delta;

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