Kinetic Resize Rotate with Jquery Transform Tool

Haven't tested it yet

HTML

<script src="http://civira.com/cdn/kinetic-4.7.4.min.js"></script>
<script src="http://civira.com/cdn/jquery-1.7.1.min.js"></script>
<script src="http://civira.com/cdn/jquery.timer-1.0.3.js"></script>
<script src="http://civira.com/cdn/jquery.transform.tool-1.0.2.js"></script>
<div id="canvas"></div>
<input id="toggle1" type="button" value="Hide or show transform tool 1" />
<input id="toggle2" type="button" value="Hide or show transform tool 2" />

JavaScript

var _stage = null;
var _layer = null;

_stage = new Kinetic.Stage({
    container: 'canvas',
    width: 640,
    height: 480
});
_layer = new Kinetic.Layer();

var rect1 = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 150,
    height: 100,
    fill: 'yellow',
    stroke: 'black'
});
_layer.add(rect1);

var rect2 = new Kinetic.Rect({
    x: 300,
    y: 250,
    width: 200,
    height: 80,
    fill: 'green',
    stroke: 'black'
});
_layer.add(rect2);

_stage.add(_layer);
_stage.draw();

// creates a transform tool for the first rectangle
$(rect1).transformTool({
    'handler-radius': 7,
    'handler-fill': 'gray',
    'border-stroke': '#333333'
});

// creates a transform tool for the second rectangle
$(rect2).transformTool({
    'allow-scale': false
});

// hides or shows transform tool 1
$('#toggle1').click(function() {
    $(rect1).transformTool('toggle');
});

// hides or shows transform tool 2
$('#toggle2').click(function() {
    $(rect2).transformTool('toggle');
});