我正在尝试在鼠标位置绘制水平和垂直线,但是我遇到了两个问题:
- 水平线没有显示出来。看起来像是一些CSS问题,但是无法解决。
- 移动鼠标时,线条的重绘不够流畅。有没有什么方法可以避免这种情况?
代码:
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);
});