26

由于 HTML5 的 translate-method 显然将绘图的原点相对于其原来的原点移动。（当我连续两次使用 ctx.translate(20,20) 时，我得到的结果与使用 ctx.translate(40,40) 时相同）现在问题是我想将绘图的原点重置为它的原始位置（它在第一次使用 translate() 之前的位置），我该怎么做？

4

4 回答 4

65

您可以通过使用.save()和.restore()

ctx.save();
ctx.translate(// do some translations);
// draw whatever
ctx.restore();

您需要调用save()以“保存”当前上下文状态。然后您可以执行平移、旋转等。在您完成调用后将restore()上下文的状态重置为您最初调用时的状态save()。

现场演示

MDN 教程也解释了

于 2012-06-21T18:17:43.480 回答
53 
ctx.setTransform(1, 0, 0, 1, 0, 0);

MDN setTransform 文档

于 2013-07-09T23:13:38.190 回答
7 
ctx.resetTransform();

有关详细信息，请参阅MDN 文档。它具有非常低的浏览器兼容性。

于 2017-04-23T12:05:18.223 回答
0

该问题询问如何重置translate操作的默认值，这是上述所有解决方案的子集。

无论您应用还是save/reset，您不仅会重置平移的值，还会重置倾斜和缩放的值（甚至是样式，在第一个的情况下）。setTransformresetTransform

要仅撤消翻译，我们只需要恢复 Canvas 使用的变换矩阵的 6 个属性中的 2 个，其余的保持不变：

const currentTransform = ctx.getTransform();

// Properties deconstructed for illustrative purposes:
const hScale = currentTransform.m11;
const vSkew = currentTransform.m12;
const hSkew = currentTransform.m21;
const vScale = currentTransform.m22;
const hTranslation = currentTransform.dx;
const vTranslation = currentTransform.dy;

ctx.setTransform(hScale, vSkew, hSkew, vScale, 0, 0);

这会将平移重置为原点 (0, 0)，而不会改变任何比例或倾斜。

请注意，这也可以通过使用transform(...)和定义要与当前持有的一个画布相乘的转换矩阵来实现，再次改变平移并保持原样的缩放和倾斜。但是，编写这样的矩阵需要知道我们当前与原点的偏移量，并且知道这些信息将允许我们首先应用translate负值。

于 2022-01-25T07:06:15.793 回答