繪製在鼠標位置崩潰的水平和垂直線條

Question

我打算在鼠標位置繪製水平和垂直線條塌縮。我面臨兩個問題

1. 水平線沒有顯示出來。看起來像一些CSS問題，但無法弄清楚。
2. 移動鼠標時，重畫線條並不平滑。它的混亂。無論如何，我可以避免這一點？

fiddle

代碼：

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

Answer 1

水平線問題可以固定：

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

查看更新後的fiddle。

編輯
您也可以使用以下方法來平滑動畫（你必須調整的時間跨度，以滿足您的需求。

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

查看更新fiddle和w3schools.com