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

【问题标题】：Find position of objects drawn in HTML5 canvas查找在 HTML5 画布中绘制的对象的位置
【发布时间】：2014-07-28 07:11:01
【问题描述】：

我正在制作一个 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/

请帮忙..

【问题讨论】：

我对画布没有经验，所以请记住我的建议。我正在查看 save() 方法的示例，但没有看到任何将变量设置为状态保存的示例。是否可以提醒画布的状态？也许你必须提醒一些更具体的事情。

标签： javascript html canvas coordinates

【解决方案1】：

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

所以我会使用这样的东西：

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。这是一种更安全的方法。

【讨论】：

我当然可以:) jsfiddle.net/LYUYf/2。请注意我是如何将 isDragging 属性添加到 Rectangle 对象的。对于每次单击，我都会根据鼠标位置检查每个 Rectangle 对象的属性。这和你做的没有什么不同。当我拖动时，我会操纵被点击对象的属性，这样可以确保每个对象总是有自己可以使用的值。
能否请您提供包含所有拖动事件（如 mouseup、mousedown 和 mouse-moves）的小提琴链接？？
我使用您的代码来测试点击时的“命中”，但我注意到它并不那么准确。您可能想研究如何使其更精确。顺便说一句，在这种情况下，您的按钮总是提醒第一个矩形（黑色矩形）的位置，但我相信您可以想出其他很酷的东西来处理它。
是的，到目前为止，我只返回第一个矩形的位置，以确保代码正常工作..最终我的目标是获取所有矩形的位置..跨度>
是的，当您遍历包含所有矩形对象的数组并读出它们的 posX 和 posY 值时，这很容易做到。顺便说一句，通过这种设置，甚至可以很容易地检查矩形是否相互碰撞。在游戏之类的东西中非常方便。

【解决方案2】：

你应该看看这个question。

save 方法将上下文的实际状态推送到一个数组，但它是一个仅由画布定义和使用的数组。您可以稍后使用方法 restore() 再次加载状态。

这是一个很好的article 关于这个话题，它会比我解释得更好。

【讨论】：