DOMPoint 转换（旋转）未在 JavaScript 中返回预期结果

Question

有人可以确认这个 DOMPoint 的转换工作正常吗？

let point = new DOMPoint(1, 1);
let matrix = new DOMMatrix('rotate(-45deg)');
let transformedPoint = point.matrixTransform(matrix);

console.log(point, transformedPoint);

我们在控制台得到的结果是：

DOMPoint { x: 1, y: 1, z: 0, w: 1 }
 
DOMPoint { x: 1.4142135381698608, y: 0, z: 0, w: 1 }

我本来希望 transformedPoint 有 x: 1 和 y: 0 因为点 (1, 1) 会有45度角。我假设转换基于原点 (0, 0)?

我们可以启发我了解转换的实际效果吗？

Answer 1

你把你的图形倒过来了，原点在top-left，所以1, 1实际上在右下角。

那么，你的点 1,1 和原点 0,0 之间的距离是 hypot( 1 - 0, 1 - 0 ) 这确实大约是 1.414213....
所以这个{ x: 1.4142135381698608, y: 0, z: 0, w: 1 }结果确实是正确的。

也许可视化会更清楚：

黄色是原点0,0。绿色是初始点1,1。红色每帧旋转 1 度。

const point = new DOMPoint(1, 1);
const matrix = new DOMMatrix("rotate(-1deg)");
let transformedPoint = point.matrixTransform(matrix);
let angle = 1;

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const axes = new Path2D( "M150 0L150 150M0 75L300 75" );
ctx.font = "14px sans-serif";
draw();

function draw() {
  transformedPoint = transformedPoint.matrixTransform(matrix);
  angle = (angle + 1) % 360;

  // clear
  ctx.setTransform( 1, 0, 0, 1, 0, 0 );
  ctx.clearRect( 0, 0, canvas.width, canvas.height );

  ctx.fillText( `angle: -${ angle }`, 10, 10 );

  ctx.stroke( axes );

  // move to the center of canvas and scale by 20
  ctx.setTransform( 20, 0, 0, 20, canvas.width / 2, canvas.height / 2 );
  // origin
  ctx.fillStyle = "yellow";
  ctx.fillRect( 0 - 0.5, 0 - 0.5, 1, 1 );
  // reference point
  ctx.fillStyle = "green";
  ctx.fillRect( point.x - 0.5, point.y - 0.5, 1, 1 );
  // transformed
  ctx.fillStyle = "red";
  ctx.fillRect( transformedPoint.x - 0.5, transformedPoint.y - 0.5, 1, 1 );
  
  requestAnimationFrame( draw );
}

<canvas id="canvas"></canvas>

DOMPoint 转换（旋转）未在 JavaScript 中返回预期结果

DOMPoint transformation (rotation) not returning the expected result in JavaScript

javascript

transformation