Почему мои формы холста неправильно перетаскиваются с мольбертом js? - PullRequest
Новая
       57

Почему мои формы холста неправильно перетаскиваются с мольбертом js?

0 голосов
/ 20 февраля 2020

Я работаю над проектом, использующим Easel js, где мне нужно сделать формы перетаскиваемыми. Я поместил фигуры в контейнер и могу перетаскивать их, однако фигуры смещены от моего курсора на расстояние, на которое фигура была изначально размещена. Так что, если фигура имела координаты х = 200 и у = 100, это на сколько она отклонена. На странице загрузки он будет в правильном месте, которое находится в середине страницы, но как только я нажму, чтобы перетащить его, он выстрелит вниз вправо. Я попытался поиграться со свойствами dragger.x и dragger.y, но это смещает начальную точку фигуры, которая мне не нужна. Как я могу сохранить исходное место фигуры и при этом сделать ее перетаскиваемой?

Вот код, с которым я работаю. canvas.height и canvas.width предназначены для того, чтобы держать все в одном месте относительно друг друга в случае изменения размера окна. 

var canvas = document.getElementById('canvas');
var canvasDiv = document.getElementById('canvasDiv');
canvas.width = canvasDiv.clientWidth;
canvas.height = canvasDiv.clientHeight;

stage = new createjs.Stage("canvas");

var cpx1 = canvas.width/1.82;
var cpy1 = canvas.height/0.96875;
var cpx2 = canvas.width/0.9761;
var cpy2 = canvas.height/31;
var lineX = canvas.width/1.458;
var lineY = canvas.height/1.7222;



var hose = new createjs.Graphics().beginStroke("black").setStrokeStyle(7).moveTo(canvas.width-196, 
160+canvas.height-(canvas.height/2)).bezierCurveTo(cpx1,cpy1,cpx2,cpy2,lineX,lineY);
line = new createjs.Shape(hose);

stage.addChild(line);

var cuff = new createjs.Shape();
//cuff.rotation = 90;
cuff.graphics.beginFill("red").drawRect(800, 400, 50, 50);


var dragger = new createjs.Container();
//dragger.regX = 725;
//dragger.regY = 205;

dragger.x = 0;
dragger.y = 0;

dragger.addChild(cuff, line);
stage.addChild(dragger);


dragger.on("pressmove",function(evt) {
    evt.currentTarget.x = evt.rawX;
    evt.currentTarget.y = evt.rawY;
    stage.update();   
});

stage.update();
...