我尝试了除解决方案之外的所有方法,同时试图弄清楚为什么我无法正确检索位于页面中心且具有自动水平边距的画布上的鼠标按下事件的 x 和 y 位置。
目前:
- 我在画布的包含父级以及画布本身上都有相对定位。
- 我从鼠标事件 .pageX 和 .pageY 中减去左偏移和上偏移
我的目标是返回用户将 strokeRect 拖到画布上的位置(鼠标按下)。我认为这是一个 CSS 问题,但我很难过。
body, header, aside, footer, div, canvas{
display: block;
position: relative;
}
canvas {
z-index: 99;
background: #996;
}
#canvas-contain{
height: 600px;
width: 967px;
margin: 50px auto;
box-shadow: 0px 0px 5px 1px #222222;
}
<script>
rect.startX = e.pageX - this.offsetLeft;
rect.startY = e.pageY - this.offsetTop;
function mouseMove(e) {
if (drag) {
rect.w = (e.pageX - this.offsetLeft) - rect.startX;
rect.h = (e.pageY - this.offsetTop) - rect.startY ;
context.clearRect(0,0,canvas.width,canvas.height);
draw();
}
}
function draw() {
context.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
}
</script>
<body>
<div id="ramRod">
<div id="canvas-contain">
<canvas id="canvas" height="600" width="967"></canvas>
</div>
<footer id="footer">
<div id="left-fb" class="foot-box"></div>
<div id="right-fb" class="foot-box"></div>
</footer>
</div>
</body>