Question

我使用div来减少宽度来创建线条。我有两个随机点坐标，我想用div画一条线。但是，div只需要一个点坐标及其宽度和高度来创建它们，结果总是一个垂直div。有没有办法旋转div以加入两个随机点？我尝试过旋转功能，但它使用指定的角度。这是我用于创建div的代码：

function creatediv(id, width, height, left, top, opacity) 
{ 
    var newdiv = document.createElement('div'); 
    newdiv.setAttribute('id', id);  

    newdiv.style.width =  width + "px";     
    newdiv.style.height = height + "px";     

    newdiv.style.position = "absolute";         
    newdiv.style.left = left + "px";         
    newdiv.style.top = top + "px";  

    newdiv.style.background = "red";    
    newdiv.style.opacity = opacity;
    //newdiv.style.transform = "rotate(37deg)";
    document.body.appendChild(newdiv); 

}

Answer 1

两点•a和•{{1}}，两者都有b坐标

距离 x y
度 Math.hypot(by-ay, bx-ax)

Math.atan2(by-ay, bx-ax) * 180 / Math.PI;根据点div坐标定位top,left a需要定义为transformOrigin才能保持left 50%以点为中心：

div

多条相关的行，以及设置样式的不同方法：

function creatediv(id, ax,ay, bx,by, size, opacity, color) { 

    var length = Math.hypot(by-ay, bx-ax),
        deg    = Math.atan2(by-ay, bx-ax) * 180 / Math.PI;

    var newdiv = document.createElement('div'); 
    newdiv.setAttribute('id', id);  
    newdiv.style.width =  length + "px";     
    newdiv.style.height = (size||2) + "px";  
    newdiv.style.left = ax + "px";   
    newdiv.style.top = ay + "px";   
    newdiv.style.background = color || "red";    
    newdiv.style.opacity = opacity || 1;
    newdiv.style.transformOrigin = "left 50%";
    newdiv.style.transform = "rotate("+ deg +"deg)";
    newdiv.style.position = "absolute";

    document.body.appendChild(newdiv); 

}


creatediv("a", 20, 20, 200, 80);

Answer 2

您可以检查两个点值之间的角度和范围，并使用以下角度旋转它：

   
var newdiv = document.createElement('div');
newdiv.setAttribute('id', 10);
var point1x = 65;
var point1y = 45;
var point2x = 80;
var point2y = 90;

var height = Math.sqrt(Math.pow((point2x-point1x),2) + Math.pow((point2y-point1y),2));
var angleDeg = Math.atan2(point2y - point1y, point2x - point1x) * 180 / Math.PI;

newdiv.style.width = 30 + "px";
newdiv.style.height = height + "px";
newdiv.style.position = "absolute";
newdiv.style.left = point1x + "px";
newdiv.style.top = point1y + "px";
newdiv.style.borderColor = "black";
newdiv.style.borderWidth = "1px";
newdiv.style.borderStyle = "solid";
newdiv.style.background = "red";
newdiv.style.opacity = 5;
  
newdiv.style.transform = "rotate("+angleDeg+"deg)";
document.body.appendChild(newdiv);

我对数学函数有点业余，所以请在使用前测试它。关于元素的角度或高度可能没有什么错误。

编辑：现在我看到你不想要计算角度。我不知道是否有适当的方法来做角度。如果有人想通过角度计算做到这一点，我不会删除这个解决方案。

如何使用JavaScript中的两个点坐标旋转div？

2 个答案: