Databases
StackOverflow2013
Postsdbo
PORaphael SVG VML Implement Multi Pivot Points for Rotation
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORaphael SVG VML Implement Multi Pivot Points for Rotation
    primarykey
    data
    text
    <p>Over the last two days I've effectively figured out how NOT to rotate Raphael Elements.</p> <p>Basically I am trying to implement a multiple pivot points on element to rotate it by mouse.</p> <p>When a user enters rotation mode 5 pivots are created. One for each corner of the bounding box and one in the center of the box.</p> <p>When the mouse is down and moving it is simple enough to rotate around the pivot using Raphael <a href="http://raphaeljs.com/reference.html#rotate" rel="nofollow noreferrer">elements.rotate(degrees, x, y)</a> and calculating the degrees based on the mouse positions and atan2 to the pivot point.</p> <p>The problem arises after I've rotated the element, bbox, and the other pivots. There x,y position in the same only there viewport is different. </p> <p>In an SVG enabled browser I can create new pivot points based on <a href="http://www.w3.org/TR/SVG/coords.html#NestedTransformations" rel="nofollow noreferrer">matrixTransformation and getCTM</a>. However after creating the first set of new pivots, every rotation after the pivots get further away from the transformed bbox due to rounding errors. </p> <p><img src="https://i.stack.imgur.com/tgD3Q.gif" alt="rotate errors"></p> <p>The above is not even an option in IE since in is VML based and cannot account for transformation.</p> <blockquote> <p>Is the only effective way to implement element rotation is by using rotate absolute or rotating around the center of the bounding box?</p> <p>Is it possible at all the create multi pivot points for an object and update them after mouseup to remain in the corners and center of the transformed bbox?</p> </blockquote> <p><strong><em>UPDATE:</em></strong> I've attempted to use jQuery offset to find the pivot after it's been rotated, and to use that offset location as the pivot point.</p> <p>Demo site ... <a href="http://weather.speedfetishperformance.com/dev/raphael/rotation.html" rel="nofollow noreferrer">http://weather.speedfetishperformance.com/dev/raphael/rotation.html</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAlmost Famous
    1. USAlmost Famous
    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. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PORaphael SVG VML Implement Multi Pivot Points for Rotation
      1. USAlmost Famous
      1. VTBountyStart
    2. VO
      singulars
      1. PORaphael SVG VML Implement Multi Pivot Points for Rotation
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PORaphael SVG VML Implement Multi Pivot Points for Rotation
      1. This table or related slice is empty.
      1. VTBountyClose
    1. COThis looks to me like it might be easily fixable - that is, I think you may be closer to a proper solution than you think... could you post or upload your code somewhere?
      singulars
      1. PORaphael SVG VML Implement Multi Pivot Points for Rotation
      1. USZevan
    2. COEdited to show code ... this way of course is not IE friendly
      singulars
      1. PORaphael SVG VML Implement Multi Pivot Points for Rotation
      1. USAlmost Famous
 

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