FabricJS - Rotate Selected Object on Button Click
Using a button click, rotate a specific 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',
selectable: false
});
canvas.add(oImg);
canvas.centerObject(oImg);
oImg.sendToBack();
canvas.renderAll();
});
$("#rotate").click(function(){
var curAngle = canvas.item(0).angle;
canvas.item(0).angle = (curAngle+15);
canvas.renderAll();
});