Question

我有一个相机对象＆＃34;缩放＆＃34;通过固定和常量变量扩展上下文进入画布。这是一个例子：

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

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

它可以正常工作，直到达到真正的高比例值，其中缩放过渡不再平滑，使用鼠标滚轮滚入和滚出变得难以忍受。

我正在寻找一种立方缩放功能，它可以在较高比例值下缩小，从而实现视觉上均匀的过渡。不幸的是，我对术语不太满意，而且我不确定要查找什么。如果您可以建议我可以研究的任何资源，并且可能举例说明它如何与Canvas一起工作，那将会很棒。

Answer 1

您正在使用线性功能进行缩放。线性函数仅将变焦量改变为1，因此从100到10的比例需要90步，但从10到1只有9，但在两种情况下放大倍数都是10倍。你可以尝试缩放比例为10％的scaleFactor：

this.scaleFactor*=0.9;

因此，如果您的放大倍数为100，则会转到90，然后是81等...但我也会设置最小步长，或者提供更大的缩放控制（快速与精确）。

Answer 2

您没有显示太多代码： - /

因此至少会有两种可能性：

用户正在快速旋转鼠标滚轮，以便画布重绘所有请求的绘图。如果是这种情况，您将需要使用称为“去抖动”的技术来限制鼠标滚轮事件。谷歌：去抖事件
如果你强迫画布以不断增加的尺寸重新绘制整个原始图像，那么画布正在减速，因为它必须计算画布外的每个像素，以便它知道在画布内绘制哪些像素。你可以通过使用context.drawImage的剪辑版本来选择较小的原始图像片段来解决这个问题。比较小块而不是整个图像。

Answer 3

如果使用累积缩放，就像在这种情况下一样，高端将以对数方式缩放，从而创建大步。

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

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

到

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

缩放将使用绝对方法（如果您需要其他变换，您需要在此处设置它们以及此方法会覆盖所有变换）。

插图：

第一行是累积的，第二行是绝对的。第二种是更精细的颗粒控制。您还可以使用两个不同的步骤因子，一个用于scaleFactor＆lt; 1和1表示=＆gt; 1。

＆＃13;

var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d"),
    scaleFactor = 1,
    step = 1.1,  // 10%
    i = 0,
    dx = 1;

ctx.translate(-100,0);

// accumulative
for(; i < 20; i++) {
  ctx.fillRect(100, 20, 5, 10);
  scaleFactor *= step;
  ctx.scale(scaleFactor, 1);
}

// absolute
ctx.setTransform(1, 0, 0, 1, -100, 0);
scaleFactor = 1;
for(i = 0; i < 20; i++) {
  ctx.fillRect(100, 50, 5, 10);
  scaleFactor *= step;
  ctx.setTransform(scaleFactor, 0, 0, 1, -100, 0);
}

＆＃13;

canvas {border:1px solid #000}

＆＃13;

<canvas width=500></canvas>

＆＃13;

HTML Canvas中的2D图形和统一缩放

3 个答案: