获取任何变换后的空间坐标的单位矩阵等效坐标

Question

ctx.setTransform(12,0,0,12,34,23)

ctx.fillText("a",0,0)

是否可以得到“a”在单位矩阵变换空间中的等效坐标？

我想在鼠标单击时锁定点字符“a”。鼠标坐标的作用就像设置了 1,0,0,1,0,0 变换一样。

谢谢

我尝试将鼠标坐标修改为给定的变换，但我想知道是否存在更简单的方法。

Answer 1

你可以通过它的

getTransform()

方法获取 2D 上下文的当前矩阵，然后你可以通过这个 DOMMatrix 的

transformPoint()

方法将你的点转换为单位坐标。

const target = document.querySelector(".target");
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.setTransform(12,0,0,12, 100, 100);
ctx.rotate(Math.random() * 180);
ctx.translate(Math.random() * 7, Math.random() * 7);
// Using an arc so it's clearer where it is on the context
ctx.arc(0, 0, 2, 0, Math.PI * 2);
ctx.fill();
// Get the current matrix
const mat = ctx.getTransform();
const { x, y } = mat.transformPoint({ x: 0, y: 0 });
console.log({ x, y });
target.style.left = `${x}px`;
target.style.top = `${y}px`;

canvas, .target { position: absolute; top: 0; left: 0 }
.target {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #FF00FFAA;
  translate: -5px -5px; /* centered */
}

<canvas width="200" height="200"></canvas>
<div class="target"></div>