rotate/translate Canvas 后获取当前坐标

Question

我一直在试图弄清楚如何使用 .getTransform 来确定我的每行中的 A x1/y1 点和 B x2/y2 点在平移和旋转之后的位置.我找到了其他答案，但它们似乎并没有完全针对我的需要，我也没有完全理解得到 returned 的矩阵。

从提供的代码片段中，您可以看到我的线条总是 return 它们的原始值。我知道有一个公式，但我不知道，也不知道如何实施。

我需要的是每一行的起点和终点。计划是将它们旋转（动画旋转）到任何角度，并将这些坐标用于光线投射。我以前从一个中心点向外或从一个方向到另一个方向完成此操作，但没有使用旋转方法使用这么多线。

这是片段

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d")
canvas.width = 200;
canvas.height = 180;

class Rays {
  constructor(x1, y1, x2, y2) {
    this.x1 = x1;
    this.y1 = y1;
    this.x2 = x2;
    this.y2 = y2;
  }
  draw() {
    ctx.save();
    ctx.translate(canvas.width/2,canvas.height/2);
    ctx.rotate(45 * (Math.PI/180))
    ctx.beginPath();
    ctx.strokeStyle = 'black';
    ctx.moveTo(this.x1, this.y1)
    ctx.lineTo(this.x2, this.y2)
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
  }
}

let rays = [];
function createRays() {
  //due to translate i have to push some lines in the negative and some positive  this causes an overlap of one line in the center.
  for (let i=0; i < 26; i++) {
    let x1 =  i < 13 ? -10 * i : i * 10 - canvas.width/2 - 20;
    let y1 =  -canvas.height;
    let x2 =  i < 13 ? -10 * i : i * 10 - canvas.width/2 - 20;
    let y2 =  canvas.height;
    rays.push(new Rays(x1, y1, x2, y2));  
  }
}
//enter angle here
createRays();

let count = 0; //just used to stop it from constantly console logging rays.x1

function drawRays() {
  for (let i=0;i<rays.length; i++) {
    rays[i].draw();
    count < 1 ? console.log(rays[i].x1) : false;
  }
  count++
}
drawRays();

console.log(ctx.getTransform())

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.fillStyle = "lightgrey";
    ctx.fillRect(0,0,canvas.width,canvas.height)
    drawRays();
    requestAnimationFrame(animate)
}
animate()

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

Answer 1

您可以使用 DOMPoint 接口，它确实提供了 .matrixTransform(DOMMatrix) 方法。

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d")
canvas.width = 200;
canvas.height = 180;

const mat = new DOMMatrix();
mat.translateSelf(canvas.width/2,canvas.height/2);
mat.rotateSelf(45);

class Rays {
  constructor(x1, y1, x2, y2) {
    const pt1 = new DOMPoint(x1, y1).matrixTransform(mat);
    const pt2 = new DOMPoint(x2, y2).matrixTransform(mat);
        
    this.x1 = pt1.x;
    this.y1 = pt1.y;
    this.x2 = pt2.x;
    this.y2 = pt2.y;
  }
  draw() {
    ctx.beginPath();
    ctx.strokeStyle = 'black';
    ctx.moveTo(this.x1, this.y1)
    ctx.lineTo(this.x2, this.y2)
    ctx.stroke();
  }
}

let rays = [];
function createRays() {
  //due to translate i have to push some lines in the negative and some positive  this causes an overlap of one line in the center.
  for (let i=0; i < 26; i++) {
    let x1 =  i < 13 ? -10 * i : i * 10 - canvas.width/2 - 20;
    let y1 =  -canvas.height;
    let x2 =  i < 13 ? -10 * i : i * 10 - canvas.width/2 - 20;
    let y2 =  canvas.height;
    rays.push(new Rays(x1, y1, x2, y2));  
  }
}
//enter angle here
createRays();

let count = 0; //just used to stop it from constantly console logging rays.x1

function drawRays() {
  for (let i=0;i<rays.length; i++) {
    rays[i].draw();
  }
  count++
}
ctx.fillStyle = "lightgrey";
ctx.fillRect(0,0,canvas.width,canvas.height)
drawRays();

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

rotate/translate Canvas 后获取当前坐标

Getting the current coordinates after rotate/translate Canvas

javascript

transformation

html5-canvas