編集:マウスイベントの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);
});