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

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

i have image loaded using fabrics 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.centerobject(oimg); canvas.renderall(); oimg.sendtoback(); });

what want have rotation button on page can rotate image. cannot modify image object after been loaded already. iv tried

oimg.rotate(90)

but oimg undefined now. has had luck this

first off, i'd suggest using .setangle method opposed .rotate.

but root of issue how target specific object.

your oimg variable localized function creating object on canvas. setting oimg global variable allows target object via variable name.

var rotatethisimage; /* set on global scope outside of function */ ... rotatethisimage = oimg; /* set oimg new global variable */ ... rotatethisimage.setangle(curangle+15); /* elsewhere in code, on button click, set angle */

here illustration of this: http://jsfiddle.net/prominc/h9kl5bs0/

another approach rotate active object on canvas. work though, object need selectable , you'd have remove selectable:false attribute.

canvas._activeobject

canvas variable name canvas self, , _activeobject whatever object selected on canvas.

here illustration of - note have select object before it'll rotate. http://jsfiddle.net/prominc/ckqk2lzs/

yet approach allow maintain selectable:false attribute select object it's object id on canvas.

canvas.item(0)

item 0 first item on canvas, lowest in layering order. if had 5 objects on canvas, top object item 4 indexing starts @ 0.

here illustration of method: http://jsfiddle.net/prominc/3efe2x9j/

javascript html5-canvas fabricjs