Question

所以我想旋转我的svg＆gt; javascript中的line元素但旋转需要围绕其中心+行的长度必须保持不变

现在仍然存在问题

我的元素：

<svg xmlns="http://www.w3.org/2000/svg">
    <line id="line" x1="20" y1="100" x2="100" y2="100" stroke-width="2"
          stroke="black">
    </line>
</svg>

这是我的javascript：

var rotateJump = 10;
var line = document.getElementById("line");
function rotate() {
    line.setAttribute("y1", parseInt(line.getAttribute("y1")) - rotateJump);
    line.setAttribute("y2", parseInt(line.getAttribute("y2")) + rotateJump);
}
rotate();

如何正确旋转保持线长？站起来时它会变得更大它水平放置的长度应该是它的最大长度。

关于我应该如何处理这个方向的正确方向的提示？

Answer 1

使用rotation（）设置transform属性应该是可行的方法旋转需要3个参数[度] [originX] [originY]
在下面的示例中，我将其放在一个间隔中，以便代码重复，您可以看到实时旋转。

var rotateJump = 10;
var line = document.getElementById("line");

var i = 0;
setInterval(function() {
  i += 2;
  line.setAttribute("transform", "rotate(" + i + ", 100, 100)");
}, 25);

<svg width="300px" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200">
  <circle cx="100" cy="100" r="80" fill="firebrick"></circle>
  <line id="line" x1="20" y1="100" x2="100" y2="100" stroke-width="2" stroke="black"></line>
</svg>

Answer 2

正如我的评论中所述，使用transform是最佳选择，如果该行不需要更改原始坐标，但情况可能并非总是如此（例如，您需要计算另一个对象与旋转线的碰撞。）

你真正想要的是如何绘制一个圆的直径，半径是你的线的长度的一半，中心点是在线的中间，给定一个角度应绘制直径。换句话说：如何在给定半径和角度的圆周上找到一个点。

因此，根据您的行，您可以获得中心（60, 100）和半径（40）。

然后，您可以计算圆圈上的点x1, y1和x2, y2：

＆＃13;

var line = document.getElementById("line");
var centerX = 60, centerY = 100, radius = 40, angle = 0;
var rotate = function(angle){
    var x1, y1, x2, y2;
 	x1 = centerX + radius * Math.cos( angle );
    y1 = centerY + radius * Math.sin( angle );
    x2 = centerX - radius * Math.cos( angle );
    y2 = centerY - radius * Math.sin( angle );
    
    line.setAttribute( 'x1', x1 );
    line.setAttribute( 'y1', y1 );
    line.setAttribute( 'x2', x2 );
    line.setAttribute( 'y2', y2 );
}
// animation
setInterval( function(){
    angle += .1;
    rotate( angle );
},100);

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg">
    <line id="line" x1="20" y1="100" x2="100" y2="100" stroke-width="2"
          stroke="black">
    </line>
</svg>

＆＃13;

围绕中心旋转线条元素

2 个答案: