使画布中的图像可拖动/可调整大小？

Question

我已经为你做了这个JSFiddle，使它更容易解释。

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

有两个图像，一个在其顶部是一个灰色环绕在中间透明矩形。背后还有一张图片，里面是红色正方形的白色。我希望用户能够将图像拖到（红色方块）后面并使图像可调整大小。我有几个问题：

1. 我不知道如何使图像可拖动，我GOOGLE了，但我真的不明白。

2. 图像位于静态图像后面，点击将简单地单击顶部图像，而不是后面的图像。

3. 后面的图像有时会在前面的图像之后绘制，所以我认为我需要延迟绘制到前面的图像。我不知道如何做到这一点。

很明显，图像只是为了您的目的。一旦用户调整了图像大小并将其移动到正确的位置，它们将被下载，画布将转换为png并保存到服务器，然后下载到用户。使用PHP，不知道如何做到这一点，但我认为我可以解决这个问题..也许:)这主要是拖动和调整位，这让我很烦恼。

如果任何人都可以提供帮助，那将是惊人的，我会非常感谢你。 :)这是我第一次在这里问一个问题。

Answer 1

欢迎来到StackOverflow :)

有很多方法可以解决这个问题。你可以用纯HTML或SVG或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