javascript - html画布上的缩放点

Question

有没有一种方法可以缩放在 amxn Canvas 中绘制的一组点，然后在 apxq 画布中重新绘制一组等效的点，其中 p < m 和 q < n？我知道缩放坐标的方法应该是一种选择，但是还有其他方法可以做到这一点吗？

提前致谢

Answer 1

这不是像确定比例因子并相应地乘以每个点一样简单吗？假设两个画布共享高/宽比，比例因子为p/m，您可以将每个点的坐标相乘以将它们映射到新画布。

如果比率不一样，您可以使用较小的因子p/m或q/n保持原始点彼此的比例，或者使用p/m缩放 x 轴和q/n缩放 y 轴。

例如（假设map受支持或您已创建等效项）：

var points = [{x:1,y:1}, {x:2,y:5}, {x:3,y:1}];
var scaleFactor = canvas2width/canvas1width;
var scaledPoints = points.map(function(p) { 
                       return { 
                           x:p.x*scaleFactor, 
                           y:p.y*scaleFactor
                       }; 
                   });