FabricJS - Rotate Active Object on Button Click
Using a button click, rotate the active object on the FabircJS Canvas.
by PromInc
HTML
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="http://promincproductions.com/gaTrackingJSFiddle.js"></script>
<button id="rotate">Rotate Image 15°</button>
<canvas id="c" width="400" height="400"></canvas>
CSS
canvas{
border-width: 1pz;
border-style: solid;
border-color: #000;
}
JavaScript
var canvas = new fabric.Canvas('c');
var src = "http://fabricjs.com/lib/pug.jpg";
fabric.Image.fromURL(src, function(oImg) {
oImg.set({
width: 200,
height: 200,
originX: 'middle',
originY: 'middle'
});
canvas.add(oImg);
canvas.centerObject(oImg);
canvas.renderAll();
});
$("#rotate").click(function(){
if( canvas._activeObject ) {
var curAngle = canvas._activeObject.angle;
canvas._activeObject.angle = (curAngle+15);
canvas.renderAll();
}
});