html - 使在 Canvas 中绘制的图像可拖动/可调整大小？

Question

我已经为您完成了这个 JSFiddle，以便于解释。

http://jsfiddle.net/eAV6w/30/

有两张图片，一张在上面，周围是灰色，中间有一个透明矩形。还有一张图片后面是白色的红色方 block 。我希望用户能够将图像拖到后面(红色方 block )并使图像可调整大小。我有几个问题:

1. 我不知道如何使图像可拖动，我用 Google 搜索过，但我不太明白。

2. 图像在静态图像后面，点击只会点击顶部图像而不是后面的图像。

3. 后面的图像有时会在前面的图像之后绘制，所以我认为我需要对前面的图像进行延迟绘制。我也不确定该怎么做。

显然，这些图像只是为了您的目的而制作的。一旦用户调整了图像的大小并将其移动到正确的位置，他们将按下下载， Canvas 将在此处转换为 png 并保存到服务器，然后下载到用户。使用 PHP，还不确定如何执行此操作，但我想我可以解决这个问题。也许 :) 目前让我烦恼的主要是拖动和调整大小位。

如果有人能提供帮助，那就太好了，我会非常感谢你。 :) 这是我第一次在这里提问。

Answer 1

欢迎来到 StackOverflow :)

有很多方法可以解决这个问题。您可以使用纯 HTML 或 SVG 或 Canvas 来做到这一点。对于 Canvas ，您需要制作自己的持久对象和拖动代码。我做了 tutorials on making and moving selectable shapes on a canvas. (虽然我实际上正在对它们进行大修以使它们更容易理解，所以请在一两天内继续关注)。

SVG 可能更容易让所有这些工作正常，因为事件已经内置到每个 SVG 对象中。关于可拖动 SVG 对象的教程应该很容易找到。

您需要有代码在每次放开对象时进行检查，以查看它是否正确地位于您希望它位于的范围内。准备好跟踪每个对象的大量 x、y 位置以及宽度和高度。

至于 3:发生这种情况是因为您没有使用图像的 onload 事件。请参阅 StackOverflow 上的其他问题以寻求帮助:Image drawn to HTML5 Canvas does not display correctly on first load