Question

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

所以这是缩放代码：

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

在更新中：

scale -= 0.01;

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

Answer 1

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

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

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

Answer 2

您可以使用setTransform

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

设置翻译，缩放和旋转的最快方法

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);

或者您可以通过计算轴方向

来设置setTransform中的旋转

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

然后，如果您需要恢复到默认转换

Font rtboxfont = richtextbox1.SelectionFont;
rtboxfont = new Font(rtboxfont.Name,rtboxfont.Size,FontStyle.Bold);

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

平滑平移和缩放。

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

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

2 个答案: