javascript - canvas 2d Context.translate(...) 是如何工作的？

Question

我正在尝试使用 OnTouchListener 和 2dContext.translate 创建一个应用，2dContext = canvas.getContext('2d')。< br/>当用户触摸屏幕和 canvas.translate 新坐标时，监听器将更改平移值。

现在我解决了一个小问题，2dContext.translate 是如何工作的。
例如:我使用 2dContext.translate(100,100) 设置第一个坐标，它不是平移，而是 View 中的实际坐标。 View 中的第二个坐标是 [400,400]。什么是正确的，2dContext.translate(400,400) 或 2dContext.translate(300,300)？

我的意思是，我是否必须将新坐标设置为最后一个坐标，如平移 (100+300)，或者我是否必须将第二个坐标设置为全新坐标 (400)？在这种情况下，坐标具有相对值还是绝对值？

Answer 1

每个翻译都是相对于当前原点的。如果调用 ctx.translate(x, y)，原点将在 x 方向和 y 方向移动 x 像素y 方向的 code> 像素。接受正值和负值。

如果您需要保持不同的原点位置，请使用 ctx.save() 和 ctx.restore() 来记住和重置先前定义的 Canvas 属性。这些函数在堆栈上运行，因此您可以保存多个状态。