Javascript 画架JS形状欠精细

我需要使用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();
}

但是，当我尝试拖动rectngle时，它会显示：rect.js:47 uncaughttypeerror:cannotreadproperty'on'of undefined

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)

---

在最新的更新中，mousedown处理程序中的i变量始终比您创建的最后一个项多一个，因为它在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事件，只需添加一次，但必须将偏移设置为全局，或将其存储在对象上

---

希望这能有所帮助。

在您给定的代码中，变量i从未实例化或设置为0。请考虑创建一个@ @摩羯座的大脑，看看编辑的版本？可能的副本