FabricJS - Rotate Using Active Object
Using the active object method, rotate the image. This requires you to isolate the image/layer that you wish to rotate.
HTML
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="http://promincproductions.com/gaTrackingJSFiddle.js"></script>
<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";
var myimg;
var group;
var triangle = new fabric.Triangle({
left:0,
top: 0,
fill: 'green',
width: 50,
height: 50,
});
var circle = new fabric.Circle({
left: 50,
top: 0,
radius: 50,
fill: 'blue',
});
fabric.Image.fromURL('http://fabricjs.com/site_assets/challengepost.png', function (oImg) {
myimg = oImg.set({
lockRotation:true,
hasControls:false,
width: 400,
height: 200,
hasBorders:true});
group = new fabric.Group([triangle, circle, myimg], {
left: 50,
top: 50,
});
canvas.add(group);
});
fabric.Image.fromURL(src, function(img) {
img.set({
lockRotation:true,
hasControls:false,
width: 400,
height: 200,
hasBorders:true});
//canvas.add(img);
}
);
var canvasImage = fabric.Image.fromURL(src, function(oImg) {
oImg.set({
width: 200,
height: 200,
originX: 'left',
originY: 'top'
});
canvas.add(oImg);
canvas.centerObject(oImg);
canvas.renderAll();
afterLoad(oImg);
});
function afterLoad(image) {
setInterval(function(){
canvas.setActiveObject(canvas.item(0));
var curAngle = canvas._activeObject.getAngle();
canvas._activeObject.setAngle(curAngle+15);
canvas.deactivateAll();
canvas.renderAll();
}, 1000);
}