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

How to scale pattern image smoothly in HTML5 canvas?

本文关键字：缩放 图像 平滑 布中 HTML5      更新时间：2023-09-26

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

所以这是缩放代码：

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

在更新中：

scale -= 0.01;

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

您可以使用

translate()而不是setTransform() 

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

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

查看此问题以获取更多信息和实时示例。

您可以使用 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使用鼠标缩放和缩放图像的工作示例（无需使用保存还原） 它还显示了如何平滑缩放和平移平移和缩放

相关文章：