0

ラファエルの紙の座標でマウスイベントの座標を取得したいと思います。setViewBoxを使用した場合でも、これらを正確にしたいと思います。

http://jsfiddle.net/CEnBN/をご覧ください

以下は、10x10の緑色のボックスを作成してから、ズームインします-そのボックスの中心をビューの原点にします。

var paper = Raphael(10, 50, 320, 200);

var rect = paper.rect(0, 0, 10, 10);
rect.attr('fill', 'green');

rect.mousedown(function (event, a, b) {
    $('#here').text([a, b]);
    console.log(event);
});

paper.setViewBox(5, 5, 10, 10);

ボックス内の位置を反映したクリック座標を受け取りたいのですが。すなわち。それらは([5-10]、[5-10])の範囲である必要があります。


注:ずっと後になって、私はD3.jsに移行しました。これにより、一般的に私はとても幸せになりました。

4

3 に答える 3

1

編集:マウスイベントのclientX/Yを使用して簡略化-要素オフセットを取得する必要性を削除

これが私が思いついたものです。基本的に、紙のclientrectとマウスイベントのclientX/ Yを使用して、紙に対してマウスの位置を修正します。次に、修正された位置をクライアントrectの幅/高さと比較し、元の用紙サイズで結果を因数分解します。

var paper = Raphael(10, 50, 320, 200);

var rect = paper.rect(0, 0, 10, 10);
rect.attr('fill', 'green');

rect.mousedown(function (event, a, b) {
    // get bounding rect of the paper
    var bnds = event.target.getBoundingClientRect();

    // adjust mouse x/y
    var mx = event.clientX - bnds.left;
    var my = event.clientY - bnds.top;

    // divide x/y by the bounding w/h to get location %s and apply factor by actual paper w/h
    var fx = mx/bnds.width * rect.attrs.width
    var fy = my/bnds.height * rect.attrs.height

    // cleanup output
    fx = Number(fx).toPrecision(3);
    fy = Number(fy).toPrecision(3);

    $('#here').text('x: ' + fx + ', y: ' + fy);
});

paper.setViewBox(5, 5, 10, 10);

更新されたフィドルリンクはここにあります:http: //jsfiddle.net/CEnBN/3/

マウスダウン機能のよりコンパクトなバージョン:

rect.mousedown(function (event, a, b) {
    var bnds = event.target.getBoundingClientRect();
    var fx = (event.clientX - bnds.left)/bnds.width * rect.attrs.width
    var fy = (event.clientY - bnds.top)/bnds.height * rect.attrs.height

    $('#here').text('x: ' + fx + ', y: ' + fy);
});
于 2013-03-12T12:55:06.883 に答える
0

次のように、結果をオフセットする必要があります。

var posx, posy;

var paper = Raphael("canvas", 320, 200);

var rect = paper.rect(0, 0, 10, 10);
rect.attr('fill', 'green');

rect.mousedown(function (e, a, b) {
    posx = e.pageX - $(document).scrollLeft() - $('#canvas').offset().left;
    posy = e.pageY - $(document).scrollTop() - $('#canvas').offset().top;
    $('#here').text([posx, posy]);
    console.log(e);
});

paper.setViewBox(5, 5, 10, 10);

Raphaeljsがターゲットとする要素を追加しました。このアップデートを、jsfiddleで確認してください。

于 2013-03-07T04:01:02.627 に答える
0

gthmbによる答えは非常に良いですが、詳細が欠けています-紙の上の長方形の位置。このバージョンは、長方形が位置(0,0)にある場合にのみ機能します。変換される状況もサポートするには、結果に長方形の位置を追加します。

function mouseEvent_handler(e) {
    var bnds = event.target.getBoundingClientRect();
    var bbox = this.getBBox();
    var fx = (event.clientX - bnds.left)/bnds.width * rect.attrs.width + bbox.x;
    var fy = (event.clientY - bnds.top)/bnds.height * rect.attrs.height + bbox.y;

    $('#here').text('x: ' + fx + ', y: ' + fy);
}

ここにフィドルの修正バージョンがあります:http://jsfiddle.net/zJu8b/1/

于 2014-02-12T11:00:20.920 に答える