时间戳

首页 > 解决方案 > 在 javascript/react/css 中的点之间绘制路径

javascript - 在 javascript/react/css 中的点之间绘制路径

问题描述

我正在尝试在不使用画布或任何其他库的情况下绘制点之间的路径。一切都适用于正度，但它不适用于负度..

我的“点”是 150x150 [px]，这就是为什么左边位置有 +75px。

这是我的代码：

  useEffect(() => {
    let x1 = spider1.x;
    let y1 = spider1.y;
    let x2 = spider2.x;
    let y2 = spider2.y;

    if (x1 > x2) {
      let xTmp = x1;
      let yTmp = y1;
      x1 = x2;
      y1 = y2;
      x2 = xTmp;
      y2 = yTmp;
    }
    if (x1 === x2) {
      const height = Math.abs(y2 - y1).toString();
      setStyle({
        width: '5px',
        left: (x1 + 75).toString() + 'px',
        top: `${Math.min(y1, y2) + 75}px`,
        height: `${height}px`,
        transform: 'rotate(0deg)'
      });
    } else {
      const a = (y2 - y1) / (x2 - x1);
      const radians = Math.atan(a);
      const degrees = radians * (180 / Math.PI);

      setStyle({
        width: `${Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1))}px`,
        left: (x1 + 75).toString() + 'px',
        top: `${Math.min(y1, y2) + 75}px`,
        height: `5px`,
        transform: `rotate(${degrees}deg)`,
        transformOrigin: `${degrees > 0 ? '0% 0%' : '100% 100%'}`
      });
    }
  }, [spider1, spider2]);

  return <div className='net' style={style} ref={myRef}></div>;

和网络类：

.net {
  position: absolute;
  background-color: red;
  z-index: 90;
}

在屏幕上，我们有相同的对象，但是第二个对象的度数是“-”，因此这条线没有连接这两个正方形

照片1 照片2

标签： javascriptcssreactjs

解决方案

这个例子有效。您将不得不将您的与我的进行比较，以了解差异是什么。

注意：我只是从头开始编写而不是使用您的示例。

只需点击“随机位置”

var button = document.getElementById("new-points");

button.onclick = function() {

  var xy1 = {
       m_x : Math.floor((Math.random() * 200) + 1),
     m_y : Math.floor((Math.random() * 200) + 1),
   };
  
   var xy2 = {
      m_x : Math.floor((Math.random() * 200) + 1),
      m_y : Math.floor((Math.random() * 200) + 1),
   };
  
   var dotA =  document.getElementById("dotA");
   dotA.style.left = (xy1.m_x - 5) + "px";
   dotA.style.top = (xy1.m_y - 5) + "px";

   var dotB =  document.getElementById("dotB");
   dotB.style.left = (xy2.m_x - 5) + "px";
   dotB.style.top = (xy2.m_y - 5) + "px";

   var line = document.getElementById("line");
            
   var distance = Math.hypot(xy2.m_x - xy1.m_x, xy2.m_y - xy1.m_y);
            
   line.style.width = distance + "px";
   line.style.left = xy1.m_x + "px";
   line.style.top = xy1.m_y + "px";
            
   var angle = ((Math.atan2(xy1.m_x - xy2.m_x, xy2.m_y - xy1.m_y) + (Math.PI / 2.0)) * 180 / Math.PI);
   line.style.transform = "rotate(" + angle + "deg)";
   line.style.display = "block";
}
#new-points {
  border: 1px solid black;
  padding: 5px;
  width: 200px;
  text-align: center;
}

.dot {
   position: absolute;
   width: 10px;
   height: 10px;
   background: blue;
 }
 
 #line {
   position: absolute;
   border-top: solid 1px red;
   height: 1px;
   max-height: 1px;
   transform-origin: 0% 0%;
 }
<div id="dotA" class="dot"></div>

<div id="dotB" class="dot"></div>
<div id="line"></div>


<div id="new-points" style="">
Random position
</div>

我也尝试了上述的 atan 方法，但它不起作用。您可以自己尝试一下，看看会发生什么。

推荐阅读