在svg中旋轉和移動線條

我想在圍繞其中心旋轉的同時左右移動一條線。在svg中旋轉和移動線條

使用矩形非常簡單，因爲您有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));

我如何才能將我行直&保持圍繞其中心旋轉的能力。

來源

2015-09-14 Gerrit Iest

請注意，旋轉變換的第二個參數恰好是（x2 + x1）/ 2，第三個參數是（y1 + y2）/ 2，即該線的中心點。

您只需在更新行位置時更新transform屬性。

來源

2015-09-14 13:48:12

你的意思是2之後的410？ 100，100 我試過了，但它飛出了屏幕，沒有我能夠好好看看發生了什麼編輯：其實，我想我可能在我的第一次嘗試中犯了一個錯誤。我會嘗試一下 –

我的移動功能不準確，您的解決方案是正確的 –

在svg中旋轉和移動線條

回答

相關問題