有没有办法从html中的画布中提取原点坐标？

Question

我的意思是，假设我有一个 100 X 100 的画布，我在上面做了

ctx.translate(50, 50)

。是否有我可以访问的方法或属性来检索它？像

ctx.originCoordinates

或

ctx.getOriginCoordinates()

（在本例中，我希望该值类似于

[50, 50]

）我有一个解决方法，每次翻译画布时我只需手动更新一个变量，但这感觉像是一种非常老套/脆弱的方法，如果有更好的方法，我洗耳恭听，提前致谢。

Answer 1

ctx.getTransform

会将矩阵返回为

DOMMatrix

要获取翻译使用

const m = ctx.getTransform();
const translationX = m.e;
const translationY = m.f;

如果变换是均匀的（即 Y 轴与 x 轴成 90 度并且 x 和 y 比例相同，那么您可以使用

获得旋转和缩放

const rotate = Math.atan2(m.b, m.a);
const scale = Math.hypot(m.a, m.b);

如果存在不统一的比例。仅注意正值

const scaleX = Math.hypot(m.a, m.b);
const scaleY = Math.hypot(m.c, m.d);

如果存在倾斜，那么您可以使用

获取 X 轴和 Y 轴的方向

const rotateX = Math.atan2(m.b, m.a);
const rotateY = Math.atan2(m.d, m.c);

请注意，如果需要，您可以使用

rotateX

和

rotateY

来获取 X 和 Y 刻度的符号

您可以设置一张画布与另一张画布的变换

// set context A to the same transform as B
ctxA.setTransform(ctxB.getTransform());