Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I've gotten it working pretty roughly: <a href="http://jsfiddle.net/UT69H/18/" rel="nofollow">http://jsfiddle.net/UT69H/18/</a></p> <p>It's really jittery, but it rotates with the path. Note that I moved the mousemove handler to the body element so that it doesn't abruptly stop if your mouse moves outside of the box itself.</p> <pre><code>bod.on "mousemove", () -&gt; if mousedown pos = getPosHandle { x: d3.mouse(h[0][0])[0], y: d3.mouse(h[0][0])[1] } pos1 = getPosHandle { x: d3.mouse(h[0][0])[0], y: d3.mouse(h[0][0])[1] - 1 } pos2 = getPosHandle { x: d3.mouse(h[0][0])[0], y: d3.mouse(h[0][0])[1] + 1 } ang = Math.round(Math.atan2(pos2.y - pos1.y, pos2.x - pos1.x) * 180 / Math.PI) - 90 h.attr "transform", "rotate(#{ang} #{pos.x} #{pos.y})" h.attr "x", (pos.x - h.attr("width") / 2) h.attr "y", (pos.y - h.attr("height") / 2) </code></pre> <p>This is a bit better: <a href="http://jsfiddle.net/UT69H/19/" rel="nofollow">http://jsfiddle.net/UT69H/19/</a></p> <pre><code>bod.on "mousemove", () -&gt; if mousedown pos = getPosHandle { x: d3.mouse(bod[0][0])[0], y: d3.mouse(bod[0][0])[1] } pos1 = getPosHandle { x: d3.mouse(bod[0][0])[0], y: d3.mouse(bod[0][0])[1] - 1 } pos2 = getPosHandle { x: d3.mouse(bod[0][0])[0], y: d3.mouse(bod[0][0])[1] + 1 } ang = Math.round(Math.atan2(pos2.y - pos1.y, pos2.x - pos1.x) * 180 / Math.PI) - 90 h.attr "transform", "rotate(#{ang} #{pos.x} #{pos.y})" h.attr "x", (pos.x - h.attr("width") / 2) h.attr "y", (pos.y - h.attr("height") / 2) </code></pre> <p>You can reduce the jitter by spacing the test points further out: <a href="http://jsfiddle.net/UT69H/21/" rel="nofollow">http://jsfiddle.net/UT69H/21/</a></p> <pre><code>bod.on "mousemove", () -&gt; if mousedown pos = getPosHandle { x: d3.mouse(bod[0][0])[0], y: d3.mouse(bod[0][0])[1] } pos1 = getPosHandle { x: d3.mouse(bod[0][0])[0], y: d3.mouse(bod[0][0])[1] - 4 } pos2 = getPosHandle { x: d3.mouse(bod[0][0])[0], y: d3.mouse(bod[0][0])[1] + 4 } ang = Math.round(Math.atan2(pos2.y - pos1.y, pos2.x - pos1.x) * 180 / Math.PI) - 90 h.attr "transform", "rotate(#{ang} #{pos.x} #{pos.y})" h.attr "x", (pos.x - h.attr("width") / 2) h.attr "y", (pos.y - h.attr("height") / 2) </code></pre>
    singulars
    1. This table or related slice is empty.
    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. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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