如何使用JavaScript通过两个点的坐标旋转一个div？

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

}

- Himanshu Jindal

---

我不明白...你传递了width，但只定义了一个坐标点left，top。你的两个点的坐标在哪里？另外，既然你使用了你所使用的东西，为什么不直接传递旋转参数呢？！ - Roko C. Buljan

为什么你无法计算角度？ - Spandan Thakur

我不想计算角度，因为我需要绘制大量实时数据，而角度的计算会使其变得低效和不一致。 - Himanshu Jindal

没有通过两组坐标来定位元素的方法。如果要使用DOM节点这样做，您需要计算一个角度（就像迄今为止的答案所做的那样）。 - Useless Code

@UselessCode 我也尝试过这个，因为每次保存状态会非常低效，因为我有一个巨大的数据集。尽管如此，我还是选择计算角度，因为这是最好的选择。谢谢。 - Himanshu Jindal

Answer 1

对于两个点•a和•b，它们都具有x y坐标。 距离 Math.hypot(by-ay, bx-ax)
角度 Math.atan2(by-ay, bx-ax) * 180 / Math.PI; div根据点a的坐标定位为top,left。
为了保持div点居中，需要将transformOrigin定义为left 50%。

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

几条相连的线，以及一种不同的设置样式的方法：

const createLine = (options) => { 
  const opt = Object.assign({
    ax: 0,
    ay: 0,
    bx: 0,
    by: 0,
    size: 1,
    color: "#000f",
  }, options);
  
  const
    length = Math.hypot(opt.by-opt.ay, opt.bx-opt.ax),
    deg = Math.atan2(opt.by-opt.ay, opt.bx-opt.ax),
    elDiv = document.createElement('div');
    
  Object.assign(elDiv.style, {
    width: `${length}px`,
    height: `${opt.size}px`,
    left: `${opt.ax}px`,
    top: `${opt.ay}px`,
    background: opt.color,
    transformOrigin: "left 50%",
    rotate: `${deg}rad`,
    position: "absolute",
  });
  
  document.body.append(elDiv); 
}

createLine({ax:0, ay:30, bx:10, by:10});
createLine({ax:10, ay:10, bx:60, by:80, color: "#0bf"});
createLine({ax:60, ay:80, bx:110, by:50});
createLine({ax:110, ay:50, bx:160, by:70, color: "#f0b8"});

- Roko C. Buljan

---

谢谢。一开始我担心角度的计算会很复杂，但是你解释得很清楚，现在看起来很容易。它有效了。 - Himanshu Jindal

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

我在数学函数方面有点业余，所以请在使用之前进行测试。元素的角度或高度可能会有一些小错误。

编辑：现在我看到您不想计算角度。我不知道是否有正确的方法用角度来解决这个问题。如果有人想用角度计算来解决这个问题，我不会删除这个解决方案。

- ReadyFreddy