Форма мольберта JS занижена - PullRequest
Новая
       7

Форма мольберта JS занижена

0 голосов
/ 11 мая 2018

Мне нужно создать перетаскиваемые случайные прямоугольники, используя объект Shape. Эта функция создает новый прямоугольник, в котором была нажата мышь. 

var rects = [];
var i=0;
var stage;
window.onload = function() {
canvas = document.getElementById("drawingCanvas");
context = canvas.getContext("2d");
stage = new createjs.Stage("drawingCanvas");

canvas.onclick = canvasClick;
}

function canvasClick(e) {
var d=Math.random()*150;  
rects[i] = new createjs.Shape();
rects[i].graphics.beginStroke("black").
beginFill("RGB"+"(" + parseInt(Math.random()*255) +"," + 
parseInt(Math.random()*255)+"," +parseInt(Math.random()*255)+")").
drawRect(e.offsetX-d/2,e.offsetY-d/2,d,d);
stage.addChild(rects[i]);
rects[i].on("mousedown", function (evant) {
console.log("jdfh");
var offset = {
     x: evant.target.x - evant.stageX,
     y: evant.target.y - evant.stageY
                         };
                         rects[i].on("pressmove", function (evant) {
                             evant.target.x = evant.stageX + offset.x;
                             evant.target.y = evant.stageY + offset.y;
                             stage.update();
                         });
                     });
i++;
stage.update();
}

Но когда я пытаюсь перетащить прямоугольник, он говорит: rect.js: 47 Uncaught TypeError: Невозможно прочитать свойство 'on' из неопределенного 

at a.<anonymous> (file:///C:/Users/Vasya/Downloads/redactor%20(1)/rect/public_html/rect.js:47:39)
at easeljs-0.8.2.min.js:12
at a.b._dispatchEvent (easeljs-0.8.2.min.js:12)
at a.b.dispatchEvent (easeljs-0.8.2.min.js:12)
at a.b._dispatchMouseEvent (easeljs-0.8.2.min.js:13)
at a.b._handlePointerDown (easeljs-0.8.2.min.js:13)
at a.b._handleMouseDown (easeljs-0.8.2.min.js:13)
at HTMLCanvasElement.f (easeljs-0.8.2.min.js:13)

1 Ответ

0 голосов
/ 14 мая 2018

В вашем последнем обновлении переменная i в обработчике mousedown всегда на единицу больше, чем последний созданный вами элемент, поскольку на него ссылаются позже, после того, как переменная i была увеличена.

Вместо этого вы также можете использовать evant.target. 

rects[i].on("mousedown", function (evant) {
  console.log("jdfh");
  var offset = {
     x: evant.target.x - evant.stageX,
     y: evant.target.y - evant.stageY
  };

  // Note: store the listener handler to remove it later
  var listener = evant.target.on("pressmove", function (evant) {
    evant.target.x = evant.stageX + offset.x;
    evant.target.y = evant.stageY + offset.y;
    stage.update();
  });

  // Remove the pressmove handler
  evant.target.on("pressup", function(evant) {
    evant.target.off("pressmove", listener);
    evant.remove(); // Remove this pressup handler too
  });
});

Напоминание об удалении обработчика pressmove, поскольку он будет добавляться снова при каждом нажатии на объект. Это потому, что ваш обработчик является просто анонимной функцией, поэтому каждый раз создается новая. Вам не нужно каждый раз добавлять событие «pressmove», вы можете просто добавить его один раз, но вам придется сделать смещение глобальным или сохранить его на своем объекте.

Надеюсь, это поможет.

...