如何在 HTML5 画布中平滑缩放图案图像？

Question

我正在使用setTransform 来缩放我的背景图案图像。刻度从1开始，每次减小0.01，直到达到0.5。

所以这里是缩放代码：

context.setTransform(scale, 0, 0, scale, position.x, position.y);

在更新中：

scale -= 0.01;

使用上面的代码，当我为更改设置动画时，背景图案图像会正确地替换为缩放的图案图像。然而，过渡并不是很顺利。它的工作原理就像图像在短时间内突然闪烁到另一个图像但很明显。我希望替换更平滑且不引人注意，但我不知道如何实现这种效果。

Answer 1

你可以使用 setTransform

前两个数字是x轴的方向和长度（比例），后两个是y轴的方向和长度，后两个是原点的位置。

设置平移、缩放和旋转的最快方法

var scale = ?
var originX = ?
var originY = ?
var rotation = ?
ctx.setTransform(scale,0,0,scale,originX,originY);
ctx.rotate(rotation);

或者您可以通过计算轴方向在 setTransform 中设置旋转

var scale = ?
var originX = ?
var originY = ?
var rotation = ?
// get the x axis direction and length
var xdx = Math.cos(rotation) * scale;
var xdy = Math.sin(rotation) * scale;
// if you are not skewing then the y axis is at 90deg so x is neg y and y is x
ctx.setTransform(xdx,xdy,-xdy,xdx,originX,originY);

那么如果需要恢复到默认变换

ctx.setTransform(1,0,0,1,0,0); // restore default transform

setTransform 的所有值都以像素为单位，set Transform 基本上描述了渲染器将在 0,0 处创建像素的位置和形状

平滑平移和缩放。

这个答案更深入，并提供了一个使用鼠标通过 setTransform 使用鼠标缩放和缩放图像的工作示例（无需使用保存恢复）它还显示了如何平滑缩放和平移 Pan and Zoom

Answer 2

您可以使用translate() 代替setTransform()

ctx.translate(pt.x,pt.y);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);

简而言之，您想通过您的偏移量translate() 画布上下文， scale() 放大或缩小，然后translate() 返回 与鼠标偏移相反。请注意，您需要将 光标位置从屏幕空间到转换后的画布上下文。

查看this问题以获取更多信息和实例。