CODEWITHSUNDEEP
fabricjs
user1584122
user1584122

Reputation: 91

fabric.js to update to rotate div instead of canvas

How to make div rotatable instead of canvas using fabric.js? What's needed to update in fabric.js to accomplish this requirement? It would be fine if canvas placed inside div to render image but instead of canvas whole div need to be rotated.

Upvotes: 0

Views: 854

Answers (1)

Josh Pearce
Josh Pearce

Reputation: 3455

It's not the job of Fabric.js to rotate (or really in any way manipulate) regular HTML elements.

You can use CSS3 styles to rotate the div which contains the canvas:

#myCanvasWrapperDiv
 {
    transform: rotate(30deg);
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari and Chrome */
    -o-transform: rotate(30deg); /* Opera */
    -moz-transform: rotate(30deg); /* Firefox */
 }

If you want the user to be able to rotate this div, you'll have to give them a way to do it. That could be as simple as a text input with a button or an onchange event handler, or complex, like a rotating handle. There may be a jQuery plugin to make elements "rotatable", similar to drag-and-drop plugins.

Upvotes: 1

Related Questions