How to rotate Image Group in kineticJS CANVAS

I have some image and I have added in one group .

When I user click on rotate left and right button I need rotate group.

 

Code :

 

                var stage = new Kinetic.Stage({

container: “container”,

width: 420,

height: 310

});

var shapesLayer = new Kinetic.Layer();

var group = new Kinetic.Group({

draggable: true

});

group.on(‘mouseover’, function() {

document.body.style.cursor = ‘pointer’;

});

group.on(‘mouseout’, function() {

document.body.style.cursor = ‘default’;

});

shapesLayer.add(group);

stage.add(shapesLayer);

 

var image_previewframeColor = new Image();

var previewframeColorIMG = new Kinetic.Image({

x: 0,

y: 0,

image: image_previewframeColor,

width: 390,

height: 274,

name: ‘image’

});

group.add(previewframeColorIMG);

image_previewframeColor.src = “images/view1/44-004_polished_black_small.png”;

var image_previewsockColor = new Image();

var previewsockColor = new Kinetic.Image({

x: 0,

y: 0,

image: image_previewsockColor,

width: 390,

height: 274,

name: ‘image’

});

group.add(previewsockColor);

image_previewsockColor.src = “images/view1/36-987_black_small.png”;

var image_previewlensColor = new Image();

var previewlensColor = new Kinetic.Image({

x: 0,

y: 0,

image: image_previewlensColor,

width: 390,

height: 274,

name: ‘image’

});

group.add(previewlensColor);

image_previewlensColor.src = “images/view1/37-613_grey_small.png”;

stage.draw();

 

}

 

 

Solution :

 

 

document.getElementById(“rotateRight”).addEventListener(“click”, function(e) {

value+=0.1;

group.rotate(value);

shapesLayer.draw();

e.preventDefault();

}, false);

document.getElementById(“rotateLeft”).addEventListener(“click”, function(e) {

value-=0.1;

group.rotate(value);

shapesLayer.draw();

e.preventDefault();

}, false);