HTML5 Canvas 中可拖动、可缩放的图像

Posted 2023-05-08

【中文标题】HTML5 Canvas 中可拖动、可缩放的图像

【英文标题】：Draggable, scalable image in HTML5 Canvas

【发布时间】：2011-08-13 05:24:13

【问题描述】：

我正在处理一个我计划在其中使用 html5 的小项目。 到目前为止，我已经设法设置了一个带有一些小功能的小演示，但它仍然缺少所有必要的功能。我希望这里的人可能有一些时间为初学者腾出时间。

无论如何，这是我的演示： http://persturesson.com/demo/

现在，如您所见，图像（是的，它是图像而不是绘制的对象，最终版本的图像会发生变化，所以不要过多关注）是可拖动的。但我希望能够像这样动态调整图像的大小： http://simonsarris.com/project/canvasdemo/demo2.html

有人知道如何将这个演示中的功能整合到我的身上吗？

感谢所有输入，谢谢。

【参考方案1】：

我写了你正在看的演示

所以相关的drawImage看起来是这样的：

context . drawImage(image, dx, dy, dw, dh)

即目标 x、y、宽度和高度。这意味着，无论原始图像的大小如何，您都可以将其放大或缩小到画布上。在我的方框示例中，您更改了fillRect 的宽度和高度，而在这里您应该只更改drawImage 的dw 和dh 值。

因此，在您的 transform.js 文件的第 32 行，而不是 150,150 的 dw,dh 值，应该有相当于保存（和修改）的宽度和高度，就像在我的演示中一样。

其他一切（让手柄工作等）应该几乎相同。

如果还有任何问题，请告诉我！