StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Edited: simplified by using clientX/Y of the mouse event - remove need to get element offset</p> <p>Here is what I came up with. Basically, correct the mouse position to be relative to the paper by using the client rect of the paper and clientX/Y of the mouse event. Then compare the corrected positions to the client rect's width/height, then factor the results by original paper dimensions:</p> <pre><code>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); </code></pre> <p>An updated fiddle link is here: <a href="http://jsfiddle.net/CEnBN/3/" rel="nofollow">http://jsfiddle.net/CEnBN/3/</a></p> <p>more compact version of mouse down func:</p> <pre><code>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); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload