如何获取旋转后的新X、Y坐标？向日葵图线条旋转平移回位求助

我明白你的困扰：你想旋转向日葵图的线条，但旋转后线条的位置总是偏移，不知道怎么让它留在原来的位置上。其实核心问题是旋转的中心点设置不对，只要调整transform的旋转参数，就能轻松解决！

问题分析 #

你当前的代码里，transform先执行了translate(50, 360)再旋转，但旋转时默认是以SVG的原点(0,0)为中心，这就导致线条旋转后整体偏移了正确位置。我们需要让线条围绕它自己的中心旋转，这样旋转后线条的位置才不会改变。

解决方案 #

D3的rotate变换支持第三个和第四个参数，用来指定旋转中心的坐标。你的线条中心正好是(xOld, yOld)（因为线条是从xOld-lineLength到xOld+lineLength的水平线段），所以只要在旋转时指定这个中心，再结合你的平移需求，就能实现旋转后位置不变的效果。

修改后的代码如下：

var xOld = (save[i][0])/(xS.value/100/3.4); 
var yOld = (save[i][1])/(yS.value/100/3.5*-1); 
// 获取并转换绘图位置，无旋转时运行正常
var line = d3.select("svg") 
.append("line") 
.attr("stroke-width","1") 
// 反向线条起点
.attr("x1", xOld - lineLength) 
.attr("y1", yOld) 
// 正向线条终点
.attr("x2", xOld + lineLength) 
.attr("y2", yOld) 
// 先平移画布，再围绕线条中心旋转
.attr("transform", `translate(50, 360) rotate(${-45}, ${xOld}, ${yOld})`)
.style("stroke","blue");

原理说明 #

1. translate(50, 360)：将线条整体移动到你需要的画布位置，这部分保留你的原有需求。
2. rotate(-45, ${xOld}, ${yOld})：指定以线条的中心(xOld, yOld)为旋转点，旋转-45度。这样旋转时线条会围绕自己的中心转动，不会偏离原来的位置。

如果你不需要手动计算旋转后的新坐标，用这种方式就能直接实现旋转且位置不变的效果。如果确实需要获取旋转后的坐标，可以用三角函数计算：

• 旋转后的x坐标：xOld + (x - xOld)*cos(angle) - (y - yOld)*sin(angle)
• 旋转后的y坐标：yOld + (x - xOld)*sin(angle) + (y - yOld)*cos(angle)
  其中angle是旋转角度（弧度制），(x,y)是原坐标点。不过对于你的场景，用transform的旋转参数会更简单高效。

内容的提问来源于stack exchange，提问作者c1tru5x