围绕中心旋转线条元素 [英] Rotate line element around center

问题描述

所以我想在javascript中旋转我的svg> line元素，但是旋转需要在它的中心附近+线的长度必须保持不变

剩余行长是现在的问题

我的元素：

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

这是我的javascript：

  var rotateJump = 10; 
 var line = document.getElementById（line）; 
函数rotate（）{
 line.setAttribute（y1，parseInt（line.getAttribute（y1）） -  rotateJump）; 
 line.setAttribute（y2，parseInt（line.getAttribute（y2））+ rotateJump）; 
} 
 rotate（）; 
  

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

任何提示如何在正确的方向上应该如何解决这个问题？

最好的选择，如果线不需要改变原来的坐标，但它可能并不总是这种情况（例如，你需要计算另一个物体与旋转后的线的碰撞）。

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

所以给出你的线你可以得到中心（ 60，100 ）和半径（ 40 ）。然后你可以计算 x1，y1 和 x2，y2 它们是圆上的点：

var line = document.getElementById（line）; var centerX = 60，centerY = 100 ，半径= 40，角度= 0; var rotate =函数（角度）{var x1，y1，x2，y2; x1 = centerX + radius * Math.cos（angle）; y1 = centerY + radius * Math.sin（angle）; x2 = centerX - 半径* Math.cos（angle）; y2 = centerY - 半径* Math.sin（angle）; line.setAttribute（'x1'，x1）; line.setAttribute（'y1'，y1）; line.setAttribute（'x2'，x2）; line.setAttribute（'y2'，y2）;} // animationsetInterval（function（）{angle + = .1; rotate（angle）;}，100）;

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

So I want to rotate my svg > line element in javascript but the rotation needs to be around its center + the length of the line has to remain the same

Remaining the line length is the problem right now

My element:

<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>

And this is my 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();

How to properly rotate maintaining line length? It gets bigger when standing up right The length it has laying horizontal should be the max length it has.

Any tips in to the right direction on how I should approach this?

解决方案

As stated in my comment using transform is the best option if the line doesn't need to change the original coordinates, but it may not always be the case (for example you'll need to calculate collision of another object with the rotated line later).

What you're really looking for is how to draw a diameter of a circle with a radius of half you line's length and the center point in the middle of the line, given an angle at which the diameter should be drawn. Or in other words: how to find a point on a circle's circumference given the radius and angle.

So given your line you can get the center (60, 100) and radius (40).

Then you can calculate x1, y1 and x2, y2 which are points on a circle:

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);

<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>

这篇关于围绕中心旋转线条元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！