javascript - Fabric js rotate a image after it has been loaded with fabric.Image.fromURL -


I have an image loaded using Fabric Fabric. Image.fromURL

  fabric.Image fromURL ($ scope.image, function (oImg) {oImg.set ({width: $ scope.imageWidth, height: $ scope.imageHeight, originX: ' Left ', originY:' top ', selectable: false}); canvas .add (oImg); canvas center object; canvas.readerel (); oimg .Sedtoback ();});   

What do I have to do now, I have a rotation button on the page where they can rotate this image although I can not modify the image object after I have already loaded it I have tried:

  oImg.rotate (90)   

But the OMG is now undefined. Does anyone have any luck with this?

First of all, I suggest using the .setAngle method. In front of rotate.

But the root of your problem is how you target that specific object.

Your OMAG variable is localized to the function that is making objects on the object canvas. So simply setting OIMG into a global variable, you can target that object through a variable name.

  var rotateThisImage; / * Set it to a global area outside of a function / / ... rotateThisImage = oImg; / * Set up the OIMG in your new global variable / / ... rotateThisImage.setAngle (curAngle + 15); / * Elsewhere in the code, click on the button, set angle *   

Here is an example:

To rotate only the active object on another approach Canvas for However for this to work, the object will need to be selected and you have to delete your selection: the wrong attribute. Canvas._activeObject

The canvas is the variable name for this canvas, and any object selected on the active object canvas.

Here's an example - note that before you rotate, select the object.

Yet another way that will allow you to be selectable: The wrong attribute is to select the object through the object ID on the canvas.

Item 0 is the first item on the canvas, which is the lowest in the layering order. If you have 5 objects on the canvas, then the top object item will be 4 because indexing begins at 0.

Here is an example of this method:

Comments

Popular posts from this blog

php - PDO bindParam() fatal error -

logging - How can I log both the Request.InputStream and Response.OutputStream traffic in my ASP.NET MVC3 Application for specific Actions? -

java - Why my included JSP file won't get processed correctly? -