查找在HTML5画布中绘制的对象的位置

debugcn 发表于 Dev

露西

我正在制作一个HTML5项目，用户可以在其中拖放画布中的多个项目..我想记录这些对象在页面加载时以及在画布中移动后的位置。为此，我正在保存所有这些都在数组中使用draw函数内部的canvas的save（）方法存储，即使在新位置上绘制对象时也会调用draw函数来存储所有上下文详细信息。

 function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rect(0, 0, WIDTH, HEIGHT);
// redraw each rect in the rects[] array
for (var i = 0; i < rects.length; i++) {
    var r = rects[i];
    ctx.fillStyle = r.fill;
    rect(r.x, r.y, r.width, r.height);
    pos[i]= ctx.save();
}
}

我在单击按钮时调用了第一个数组元素的值，以确保正确存储上下文值。

function position(){
alert("pos[0]");
}

当我运行此代码时，在按钮上单击我会在警报框中获得未定义的输出，如下图所示。不明确的 ...

上面代码的js小提琴是

http://jsfiddle.net/qm9Eb/4/

请帮忙..

依阿罗宾

更好的方法是为每个矩形创建一个新对象。这样，您可以将每个对象及其自身的属性存储在数组中，并在绘制循环的每个循环中重绘它。您可以随时访问该对象上的所有变量，并以更加灵活的方式使用它。

所以我会用这样的东西：

function Rectangle(props){
  var posX = this.posX = props.x;
  var posY = this.posY = props.y;

  this.width = props.width;
  this.height = props.height;
  this.fill = props.fill;

  this.draw = function(){
    ctx.fillStyle = this.fill;
    ctx.fillRect(this.posX, this.posY, this.width, this.height);
  }
}

在此JSFiddle http://jsfiddle.net/hgh2S/中演示了此用法。

我放弃了拖动事件，所有这些都使用例更加清楚。根据此示例，您可以轻松地自己实现它。

另外，请注意我将按钮挂钩到侦听器的方式，而不是直接从HTML元素调用JS。这是一种更安全的方法。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。