Databases
StackOverflow2013
Postsdbo
POposition of cursor on canvas element(html5) correct in eclipse but not in other browsers
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POposition of cursor on canvas element(html5) correct in eclipse but not in other browsers
    primarykey
    data
    text
    <p>I am devoloping a visualizer of some graphs in jquery. For this I am using the new functionality of html5: canvas.getContext('2d'), explained here: <a href="https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas" rel="nofollow">https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas</a> Now I can draw interactive nodes on a canvas, without the use of flash or java.</p> <p>The problem that I have is with the position of the cursor in relation to that canvas. I need that position to check whether the position is between the boundaries of the a node.</p> <p>This functionality works perfect in the browser of eclipse, but for some strange reason it doesn't work in chrome or firefox. After a lot of debugging I found out that the vertical position(.y) of the nodes are incorrect (so when you 20px beneath the node in chrome or 50px beneath the node in firefox everything works fine). I could change those numbers depending on the browser, but I expect a lot of problems with that kind of solutions.</p> <p>I am working with the arborjs library. I don't think that the problems is situated in this library itself, because <a href="http://nooshu.com/explore/arbor-visual-thesaurus/" rel="nofollow">this site</a> works perfect with the same library and (almost) the same use of it.</p> <p>Her is a code snippet of the nearest function of the arbor.js file, which iterates over all the nodes and checks whether the clicked position lies between the boundaries of the node.</p> <pre><code>nearest: function (x) { var original = x; if (u !== null) { x = g.fromScreen(x) } var w = { node: null, point: null }; var v = g; $.each(c.nodes, function (B, y) { var z = y._p, pos = g.toScreen(z), width = y.data.width, height = y.data.height, pos = g.toScreen(z), bound1 = pos.x - width/2, bound2 = pos.x + width/2, bound3 = pos.y - height/2, bound4 = pos.y + height/2;; if (z.x === null || z.y === null) { return } if (bound1 &lt; original.x &amp;&amp; original.x &lt; bound2 &amp;&amp; bound3 &lt; original.y &amp;&amp; original.y &lt; bound4) { w = { node: y, point: z }; if (u !== null) { w.screenPoint = g.toScreen(z) } } }); if (w.node) { if (u !== null) { w.distance = g.toScreen(w.node.p).subtract(g.toScreen(x)).magnitude() } return w } else { return null } }, </code></pre> <p>and this is the node calling/using it:</p> <pre><code>var pos = $(canvas).offset(); _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top); selected = particleSystem.nearest(_mouseP); </code></pre> <p>Does anybody has some experience with those kind of bugs? I hope that I described the problem sufficiently.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USConsec
    1. USConsec
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COWhere is the `pos.left` value coming from?
      singulars
      1. POposition of cursor on canvas element(html5) correct in eclipse but not in other browsers
      1. USJonas
    2. COsry I forgot to include that line of code. (I added it to the code) It contains the offset of the canvas (this is in every browser the same, so there is no problem)
      singulars
      1. POposition of cursor on canvas element(html5) correct in eclipse but not in other browsers
      1. USConsec
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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