我正在制作一个绘图应用程序而且我必须将它放在中心位置。
检测我使用的光标位置
$('#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工作正常。谢谢你的帮助
这是演示的小提琴
答案 0 :(得分:0)
请参阅您在问题评论中发布的小提琴,问题在于您使用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/