Блог

Я имею в виду, что, допустим, у меня есть холст размером 100 X 100, и я сделал ctx.translate(50, 50) это. Есть ли метод или свойство, к которому я мог бы получить доступ для его извлечения? Например ctx.originCoordinates , или ctx.getOriginCoordinates() (в этом примере я ожидаю, что значение будет примерно таким [50, 50] ) У меня есть обходной путь, при котором я просто вручную обновляю переменную каждый раз, когда перевожу холст, но это кажется очень сложным / хрупким способом сделать это, и если есть лучший способ, я весь внимание, заранее спасибо.

ctx.getTransform вернет матрицу в виде DOMMatrix

Чтобы получить перевод, используйте

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

Если преобразование является равномерным (то есть ось Y находится на 90 градусов от оси x, а масштаб 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());