Question

我试图将鼠标坐在一个位于具有自动边距的div中的画布上是不成功的。我有一个小提琴设置，我希望有人能看到问题所在。

画布背后的逻辑是正确的，如果我删除边距但是边距偏离了偏移的尺寸。

function init() {
    FGcanvas.addEventListener('mousedown', mouseDown, false);
    FGcanvas.addEventListener('mouseup', mouseUp, false);
    FGcanvas.addEventListener('mousemove', mouseMove, false);
}

function mouseDown(e) {
  rect.startX = e.clientX - FGcanvas.offsetLeft
  rect.startY = e.clientY - FGcanvas.offsetTop;
  drag = true;
}

function mouseUp() {
  drag = false;
}

function mouseMove(e) {
  if (drag) {
    rect.w = (e.clientX - rect.startX) - FGcanvas.offsetLeft; //(event.clientX - rect.start.x) - canvas.offsetLeft
    rect.h = (e.clientY - rect.startY) - FGcanvas.offsetTop;
    FGcontext.clearRect(0,0,FGcanvas.width,FGcanvas.height);
    draw();
  }
}


function draw() {
  FGcontext.clearRect(0,0,FGcanvas.width,FGcanvas.height);
  FGcontext.fillRect(rect.startX, rect.startY, rect.w, rect.h);
}

Answer 1

我不完全确定，因为我非常依赖jQuery，但我不认为你可以在绝对时获得元素的偏移值。

那么为什么不从父div中得到不是绝对的位置呢？我取代了这个：

FGcanvas.offsetLeft
FGcanvas.offsetTop

使用：

document.getElementById('ramRod').offsetLeft
document.getElementById('ramRod').offsetTop

我还删除了你在这里指定的位置：亲戚：

body, header, aside, footer, div {
    display: block;
    position: relative;
}

它只会影响身体，因为您再次为所有其他元素指定它。

希望这有用！（本网站的第一个答案！）

编辑：哦，是的，忘了链接，这是我更新的小提琴：http://jsfiddle.net/ZDXWP/

如何从窗口中心的画布中获取x和y

1 个答案: