如何獲得居中div內的光標位置？

我正在製作一個繪圖應用程序，我不得不將它居中。如何獲得居中div內的光標位置？

爲了檢測我用

$('#drawbox').mousedown(function(e){ 
    paint = true; 

    var mouseX = e.pageX - this.offsetLeft; 
    var mouseY = e.pageY - this.offsetTop; 

    addClick(e.pageX-this.offsetLeft, e.pageY-this.offsetTop); 
    redraw(); 
});

的drawbox DIV被包裹在一箇中心DIV與下面的樣式

position:relative; 
margin:auto; 
text=align:center;

光標位置

這導致了我的畫是出界，對於一些原因是它沒有居中包裝div正常工作。感謝您的幫助

這裏是演示

https://jsfiddle.net/ok0ohbxj/

來源

2017-08-06 Chester Cheng

你小提琴不會顯示問題。你想這樣：https://jsfiddle.net/nvfkqh2h/？（沒有改變一些東西，只是包含了jQuery，並將canvas與你指定的類一起圍繞在一個div上）。適用於我。 – lexith

@lexith是的，這正是我想要的，謝謝！由於一些奇怪的原因，完全相同的代碼在我的測試環境下無法使用。我的圖紙聚集在畫布的右下方，有時候不會顯示它們 –

@lexith我已更新jsfiddle以向您展示我的意思https://jsfiddle.net/nvfkqh2h/1/ –

指的你在你的問題中留言貼小提琴小提琴，問題是你的offsetTop用法：

HTMLElement.offsetTop只讀屬性返回當前元素相對於offsetParent節點頂部的距離。

在你的情況，offsetParent節點是包裝容器.centerHelper不是你的文檔。

既然你已經使用jQuery，我建議去與$('drawbox').offset()相反，它返回的偏移量相對於文檔：

$('#drawbox').mousedown(function(e){ 
    paint = true; 

    var mouseX = e.pageX - $('#drawbox').offset().left; 
    var mouseY = e.pageY - $('#drawbox').offset().top; 
    addClick(mouseX, mouseY); 
    redraw(); 
}); 

$('#drawbox').mousemove(function(e){ 
    if (paint){ 
     var mouseX = e.pageX - $('#drawbox').offset().left; 
     var mouseY = e.pageY - $('#drawbox').offset().top; 
     addClick(mouseX,mouseY, true); 
     redraw(); 
    } 
});

而且一搗鼓你可以試試：https://jsfiddle.net/6gwnexjL/

來源

2017-08-06 16:00:09 lexith

完美地工作，謝謝！ –

如何獲得居中div內的光標位置？

回答

相關問題