HTML5画布/CSS缩放

HTML5 Canvas/CSS scaling

本文关键字：缩放 CSS 画布 HTML5      更新时间：2023-09-26

所以我有一个网络应用程序，可以让你画矩形和形状之类的东西。它根据第一个坐标是（x1，y1），第二个坐标是"（x2，y2）"的想法绘制它们。当以100%缩放在画布上绘制时，一切都会按预期进行。但当我（通过CSS）缩放到80%时，应用程序会从（0,0）画布点获得鼠标位置的坐标作为实际屏幕像素。它用这些点在缩放过的画布上绘制它们，但按比例缩放。这使得所有的矩形都画错了坐标。

这很难解释，所以这里有一个我在画布上画一个缩放到80%的矩形的快速视频。https://dl.dropboxusercontent.com/u/15582820/problem.swf你可以理解为什么这不起作用。基本上，必须有一个公式，这样它就可以获得缩放后的坐标，并将其乘以基于缩放比例的某个数字（0-100%），以获得缩放时的实际屏幕坐标。

非常感谢您的帮助。我被卡住了。

实现方法：

zoom = [between 0-100...];
x1 = 100/zoom

听起来很简单，但这就是一切。

相关文章：