0

RaphealJS を使用してベクター描画ツールを作成しました。すべての描画が完了し、機能しています。

ブラウザ ウィンドウのサイズを変更してマウス ポインタを描画しようとすると、描画されている場所から外れてしまうという問題が発生します。

ブラウザのマウス移動イベントを使って線を引く , みたいな

$(document).mousemove(function(e){
    if (IE) {
      var dh = $("#details").height();
      var dw = $("#details").width();
          xx = e.offsetX;
          yy = e.offsetY;
    } else {
       var offset = $("#workcanvas").offset();
       xx = e.pageX - offset.left;
       yy = e.pageY - offset.top;
    }
    if (lineObject != null) {
        lineObject.updateEnd(xx, yy);
    } else {
        lineObject = Line(xx, yy, xx, yy, MasterCanvas);
   }
});

キャンバスと背景画像を作成します

var MasterCanvas = Raphael($("#workcanvas").attr("id"));

var MasterBGImage = MasterCanvas.image(imgPath, 0, 0, $("#workcanvas").width(),$("#workcanvas").height());

MasterCanvas.setViewBox(0, 0, $("#workcanvas").width(), $("#workcanvas").height(), true);

そして、ウィンドウのサイズ変更イベントでこれを試しました

MasterCanvas.setSize($("#workcanvas").width(), $("#workcanvas").height());

今、私はこれに対して数日間頭を悩ませてきましたが、役に立ちませんでした. 注:描画機能は機能します。ウィンドウのサイズが変更されない限り、すべてが素晴らしいですが、ページのサイズが変更されると、描画ポイントがオフになります。

4

1 に答える 1