translate, rotate and scale example

This examples shows how to rotate, move and scale an object.

by ArickSu

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.js"></script>
<div><input id="up" type="button" value="Up" /><input id="down" type="button" value="Down" /><input id="left" type="button" value="Left" /><input id="right" type="button" value="Right" /></div>
<div><input id="rotate1" type="button" value="Rotate +" /><input id="rotate2" type="button" value="Rotate -" /></div>
<div><input id="scaleh1" type="button" value="Scale H+" /><input id="scaleh2" type="button" value="Scale H-" /><input id="scalev1" type="button" value="Scale V+" /><input id="scalev2" type="button" value="Scale V-" /></div>
<div id="canvas"></div>

JavaScript

var stage = new Kinetic.Stage({
    container: 'canvas',
    x: 320,
    y: 240,
    width: 640,
    height: 480
});
var layer = new Kinetic.Layer();
var translateGroup = new Kinetic.Group();
var rotateGroup = new Kinetic.Group();
var scaleGroup = new Kinetic.Group({
    offsetX: 100,
    offsetY: 75
});

// adds a yellow rectangle to the scaleGroup
var rect = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: 200,
    height: 150,
    fill: 'yellow',
    stroke: 'black'
});
scaleGroup.add(rect);

// adds a semitransparent green circle to the scaleGroup
var circ = new Kinetic.Circle({
    x: 200,
    y: 75,
    radius: 60,
    fill: 'green',
    stroke: 'black',
    opacity: 0.2
});
scaleGroup.add(circ);

rotateGroup.add(scaleGroup);
translateGroup.add(rotateGroup);
layer.add(translateGroup);
stage.add(layer);

// action handlers
$('#up').click(function() {
    translateGroup.move(0, -5);
    layer.draw();
});
$('#down').click(function() {
    translateGroup.move(0, +5);
    layer.draw();
});
$('#left').click(function() {
    translateGroup.move(-5, 0);
    layer.draw();
});
$('#right').click(function() {
    translateGroup.move(+5, 0);
    layer.draw();
});
$('#rotate1').click(function() {
    rotateGroup.rotate(10);
    layer.draw();
});
$('#rotate2').click(function() {
    rotateGroup.rotate(-10);
    layer.draw();
});
$('#scaleh1').click(function() {
    scaleGroup.setScaleX(scaleGroup.getScaleX() + 0.02);
    layer.draw();
});
$('#scaleh2').click(function() {
    scaleGroup.setScaleX(scaleGroup.getScaleX() - 0.02);
    layer.draw();
});
$('#scalev1').click(function() {
    scaleGroup.setScaleY(scaleGroup.getScaleY() + 0.02);
    layer.draw();
});
$('#scalev2').click(function() {
    scaleGroup.setScaleY(scaleGroup.getScaleY() - 0.02);
    layer.draw();
});