绘制在鼠标位置折叠的水平线和垂直线

Draw horizontal and vertical lines collapsing at mouse position

本文关键字：水平线 垂直线 折叠 鼠标 位置 绘制      更新时间：2023-09-26

我正在绘制鼠标位置折叠的水平和垂直线。我面临两个问题

  1. 水平线未显示。似乎是一些CSS问题，但无法弄清楚。
  2. 移动鼠标时，线条的重绘并不流畅。它的杂乱无章。无论如何，我可以避免吗？

小提琴

法典： 

var element = document.getElementById('box');
var drawLines = function(event) {
  var x = event.pageX;
  var y = event.pageY;
  var straightLine = element.querySelector('.straightLine');
  var hrLine = element.querySelector('.hrLine');
  var slTrans = 'translate(' + x + 'px, 0px)';
  var hrTrans = 'translate(0px, ' + y + 'px)';
  if(!straightLine) {
     straightLine = document.createElement('div');
     straightLine.classList.add('straightLine');
     straightLine.style.height = "100%";
     straightLine.style.width = '2px';
     element.appendChild(straightLine);
  }
  straightLine.style.transform = slTrans;
  if(!hrLine) {
     hrLine = document.createElement('div');
     hrLine.style.height = "2px";
     hrLine.classList.add('hrLine');
     hrLine.style.width = '100%';
     element.appendChild(hrLine);
  }
  hrLine.style.transform = hrTrans;
}
element.addEventListener('mousemove', function(event) {
   drawLines(event);
});
element.addEventListener('mousedown', function(event) {
   drawLines(event);   
});
element.addEventListener('mouseup', function(event) {
   drawLines(event);
});
element.addEventListener('mouseout', function(event) {
   drawLines(event);
});

水平线问题可以通过以下方式修复：

.straightLine, .hrLine {
    position: absolute;
    background-color: red;
}

请参阅更新的小提琴。

编辑
您还可以使用以下方法来平滑动画（您必须调整时间跨度以满足您的需求：

.straightLine, .hrLine {
    position: absolute;
    background-color: red;
    transition: transform .05s ease-in-out;
}

请参阅更新的小提琴和 w3schools.com。

相关文章：