如何解决从 HTML Canvas 中的一个点缩放效果
我正在制作一个网络应用程序,您可以在其中绘制网格(如像素艺术)。假设我有一个这样的 32x32 网格:
我可以很容易地计算出每个盒子的宽度和高度:
let boxWidth = canvas.width / 32
let boxHeight = canvas.height / 32
我正在实施放大和缩小功能,我设法让它发挥作用:
let boxWidth = (canvas.width / 32) * scale
let boxHeight = (canvas.height / 32) * scale
// calculate new boxWidth and boxHeight every time the scale changes,and then redraw the whole canvas
例如,如果我将比例设置为 1.5,则上面的网格将如下所示:
完美运行。但是,“问题”在于它仅从 (0,0) 位置缩放,而不是从鼠标指针所在的位置缩放。
老实说,我完全不知道如何实现这样的功能。我猜我不仅要更改每个框的宽度和高度,还必须改变它们的位置?
如果有人能澄清并给我有关如何进行的提示,我将不胜感激
谢谢
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。