0

自動マージンのあるdivにあるキャンバスでマウスの座標を取得しようとして失敗しました。私はフィドルをセットアップしており、誰かが問題を理解できることを望んでいます。

マージンを削除しても、キャンバスの背後にあるロジックは正しいですが、マージンを使用すると、オフセットの寸法だけオフになります。

http://jsfiddle.net/mcgraw73/Mfafz/

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

1 に答える 1

1

jQueryに大きく依存しているため、正確にはわかりませんが、要素が絶対値の場合、要素のオフセット値を取得できないと思います。

では、絶対にない親 div から位置を取得してみませんか? 私はこれを置き換えました：

FGcanvas.offsetLeft
FGcanvas.offsetTop

と ：

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

ここで指定した position:relative も削除しました。

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

他のすべての要素に対して再度指定したため、本体にのみ影響しました。

これが役に立ったことを願っています！(このサイトでの最初の回答!)

編集:そうそう、リンクを忘れました。ここに私の更新されたフィドルがあります: http://jsfiddle.net/ZDXWP/

于 2013-03-19T18:55:20.050 に答える