Question

我想在围绕自己的中心旋转时左右移动一条线。

使用矩形非常容易，因为你有x，y和高度和宽度。虽然有了一条线，但我似乎无法弄明白。

<line id='line' x1='20' y1='100' x2='180' y2='100' stroke-width='2' stroke='black' transform='rotate(410, 100, 100)'></line>

我可以通过编辑旋转

的第一个值来轻松旋转我的线条

现在，一旦我移动我的线，旋转就不再正常工作，并且不会围绕其中心旋转。

同样移动我的物体有一种向下倾斜的冲动，而它应该是直的。

this.lineObject.setAttribute("x2", parseInt(this.lineObject.getAttribute("x2")) + step);
this.lineObject.setAttribute("x1", (parseInt(this.lineObject.getAttribute("x2")) - 160)); //160 is the length of the line.
this.lineObject.setAttribute("y2", (parseInt(this.lineObject.getAttribute("y2")) - step));
this.lineObject.setAttribute("y1", (parseInt(this.lineObject.getAttribute("y1")) - step));

如何直线移动我的线路？保持围绕其中心旋转的能力。

Answer 1

注意旋转变换的第二个参数恰好是（x2 + x1）/ 2，第三个参数是（y1 + y2）/ 2，即线的中心点。

您需要做的就是在更新行位置时更新transform属性。

在svg中旋转并移动线条

1 个答案: