Javascript HTML画布中的二维图形和均匀缩放

我有一个摄影机对象，它通过一个固定不变的变量放大背景，从而“缩放”到画布上。这是一个例子：

zoom: function(zoomConstant) {
    this.scaleFactor = this.scaleFactor + zoomConstant;
}

update: function(context) {
    context.scale(this.scaleFactor, this.scaleFactor);
}

它可以正常工作，直到达到真正的高比例值，缩放过渡不再平滑，使用鼠标滚轮进行的滚入滚出变得慢得令人无法忍受

---

我正在寻找一个立方体缩放函数，它在更高的缩放值下缩放得更少，从而提供视觉上均匀的过渡。不幸的是，我对术语不太熟悉，也不知道该查什么。如果您能推荐我可以研究的任何资料来源，并举例说明如何使用画布，那就太好了。

您正在使用线性函数进行缩放。线性函数只会将缩放量更改1，因此从100缩放到10需要90步，但从10缩放到1只需要9步，但在这两种情况下，放大率都是10倍。您可以尝试按scaleFactor的10%进行缩放：

this.scaleFactor*=0.9;

---

所以如果你的放大倍数是100，你会变成90，然后是81，等等。。。但我也会设置一个最小步长，或者提供对缩放的更好控制（快速与精确）。

您不会显示太多代码：-/

因此，我想到了至少两种可能性：

• 用户旋转鼠标滚轮太快，画布无法重新绘制所有请求的绘图。如果是这种情况，您需要使用一种称为“去抖动”的技术来限制鼠标滚轮事件。谷歌：去盎司事件

• 如果强制画布以越来越大的尺寸重新绘制整个原始图像，那么画布的速度会变慢，因为它必须计算画布外的每个像素，以便知道在画布内绘制哪些像素。您可以通过使用

  context.drawImage

  的剪辑版本选择原始图像的较小部分并缩放该较小部分而不是整个图像来解决此问题

---

如果使用累积缩放，如本例中所示，高端将以对数方式缩放，从而产生较大的步长

您可能希望使用绝对比例因子，因此如果更改此行：

update: function(context) {
    context.scale(this.scaleFactor, this.scaleFactor);
}

到

缩放将使用绝对方法（如果需要其他变换，则需要在此处设置它们，并且此方法将覆盖所有变换）

说明：

第一行是累积的，第二行是绝对的。第二种方法有更多的细粒度控制。您还可以使用两个不同的步长因子，一个用于scaleFactor<1，另一个用于=>1

var canvas=document.querySelector（“canvas”），
ctx=canvas.getContext（“2d”），
scaleFactor=1，
阶跃=1.1，//10%
i=0，
dx=1；
ctx.translate（-100,0）；
//累积的
对于（；i<20；i++）{
ctx.fillRect（100,20,5,10）；
scaleFactor*=步长；
ctx.标度（标度因子，1）；
}
//绝对的
setTransform（1,0,0,1，-100,0）；
scaleFactor=1；
对于（i=0；i<20；i++）{
ctx.fillRect（100,50,5,10）；
scaleFactor*=步长；
setTransform（scaleFactor，0,0,1，-100,0）；
}

canvas{border:1px solid#000}

update: function(context) {
    context.setTransform(this.scaleFactor, 0, 0, this.scaleFactor, 0, 0);
}