Javascript 绘制在鼠标位置折叠的水平线和垂直线
我要画水平线和垂直线,在鼠标位置折叠。我面临两个问题Javascript 绘制在鼠标位置折叠的水平线和垂直线,javascript,Javascript,我要画水平线和垂直线,在鼠标位置折叠。我面临两个问题 水平线没有显示。似乎有一些CSS问题,但无法解决 移动鼠标时,线的重绘不平滑。它杂乱无章。不管怎样,我可以避免吗 代码: var element = document.getElementById('box'); var drawLines = function(event) { var x = event.pageX; var y = event.pageY; var straightLine = element.quer
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;
}
请参阅更新和。谢谢,看起来像是小提琴问题。@adamdc添加动画是有意义的。但它的移动速度不如鼠标:)@例外鼠标移动并不总是平稳的(我的灵敏度设置非常急促),添加过渡将允许您对此进行补偿。较短的计时或不同的过渡计时功能可以使您更接近您所追求的结果。即使没有过渡,动画也会跟在鼠标后面(对我来说非常平滑)。