Javascript 在旋转/平移画布后获取当前坐标

我一直在想如何使用

.getTransform

来确定在平移和旋转之后，我的每一行的A点

x1/y1

和B点

x2/y2

。我已经找到了其他答案，但它们似乎并没有完全针对我需要的东西，也没有完全理解返回的矩阵

从提供的代码片段中，您可以看到我的行始终返回其原始值。我知道这有一个公式，我只是不知道如何实现它

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

下面是片段

let canvas=document.getElementById（“canvas”）；
让ctx=canvas.getContext（“2d”）
画布宽度=200；
高度=180；
类射线{
构造器（x1、y1、x2、y2）{
这是1.x1=x1；
这是1.y1=y1；
这是0.x2=x2；
这1.y2=y2；
}
画（）{
ctx.save（）；
ctx.translate（canvas.width/2，canvas.height/2）；
ctx.旋转（45*（数学PI/180））
ctx.beginPath（）；
ctx.strokeStyle=‘黑色’；
ctx.moveTo（this.x1，this.y1）
ctx.lineTo（this.x2，this.y2）
ctx.stroke（）；
ctx.closePath（）；
ctx.restore（）；
}
}
让光线=[]；
函数createRays（）{
//由于平移，我必须在负片和正片上推一些线，这会导致中间有一条线重叠。
for（设i=0；i<26；i++）{
设x1=i<13？-10*i:i*10-canvas.width/2-20；
设y1=-canvas.height；
设x2=i<13？-10*i:i*10-canvas.width/2-20；
设y2=canvas.height；
射线推送（新射线（x1，y1，x2，y2））；
}
}
//在这里输入角度
createRays（）；
让计数=0//只是用来阻止它不停地运行。x1
函数drawRays（）{
对于（设i=0；i您可以使用提供
.matrixTransform（DOMMatrix）
方法的接口


let canvas=document.getElementById（“canvas”）；
让ctx=canvas.getContext（“2d”）
画布宽度=200；
高度=180；
const mat=新的DOMMatrix（）；
材料平移自身（画布宽度/2，画布高度/2）；
材料自转（45）；
类射线{
构造器（x1、y1、x2、y2）{
常数pt1=新的DOMPoint（x1，y1）。矩阵变换（mat）；
常数pt2=新的DOMPoint（x2，y2）。矩阵变换（mat）；
这1.x1=pt1.x；
这1.y1=pt1.y；
这是1.x2=pt2.x；
这1.y2=pt2.y；
}
画（）{
ctx.beginPath（）；
ctx.strokeStyle=‘黑色’；
ctx.moveTo（this.x1，this.y1）
ctx.lineTo（this.x2，this.y2）
ctx.stroke（）；
}
}
让光线=[]；
函数createRays（）{
//由于平移，我必须在负片和正片上推一些线，这会导致中间有一条线重叠。
for（设i=0；i<26；i++）{
设x1=i<13？-10*i:i*10-canvas.width/2-20；
设y1=-canvas.height；
设x2=i<13？-10*i:i*10-canvas.width/2-20；
设y2=canvas.height；
射线推送（新射线（x1，y1，x2，y2））；
}
}
//在这里输入角度
createRays（）；
let count=0；//只是用来阻止它持续记录光线。x1
函数drawRays（）{
对于（让我=0；这确实回答了我的问题。我还有几个问题希望你能回答。这比getTransform有什么缺点吗？它有什么优点吗？同样的技术可以用于所有形状吗？比如，也许我决定旋转需要碰撞检测的矩形。我真的很欣赏这个伟大的答案。getTrans表单本身将返回一个DOMMARX，因此您可以从那里执行完全相同的操作，但是，如果您在转换位置重新绘制点，而不更改其间的上下文转换，则您的点将被转换两次。还请注意，如果需要，您可以将该DOMMARX传递到
setTransform
。然后请注意
isPointInPath
考虑了当前上下文的转换，因此它也可能是一个选项。如果您需要一个标识矩阵，构造函数可能有一个更快的路径，但总而言之，没有什么大赢家，这取决于您的项目结构。是的，您可以转换多边形的所有点来转换该多边形。您能告诉我吗告诉我我需要做什么来设置这些线的动画并使它们旋转？我尝试什么似乎无关紧要。它们不会设置动画，而只是继承初始位置。我已经尝试将它们放置在动画循环中，并在外部使用一个增量的
角度
变量。除其他事情外，它们似乎应该工作。如果您只想这样做的话画这些线，动画，然后最好的肯定是直接使用上下文的变换：如果你想更新你的点并需要读回值，那么你必须创建一个新的DOMMARX，可能每帧也要创建一个新的DOMPoints，这可能是非常无效的。