HTML5 Canvas Shape transform and selection

WARNING! This feature is experimental.

Transformer class is under deep development. Use it VERY careful. Please report any bugs or features to GitHub Repo.

To use this feature we have to use development version of Konva directly from GitHub master branch.

Transformer is a special kind of Konva.Group. It allows you easily resize and rotate any shape.

Instructions: select a rectangle. Try to resize and rotate it.

Konva Shape transform and selection Demoview raw
<!DOCTYPE html>
<html>

<head>
<!-- USE DEVELOPMENT VERSION -->
<script src="https://rawgit.com/konvajs/konva/master/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Select and Transform Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>

<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});

var layer = new Konva.Layer();
stage.add(layer);

var rect1 = new Konva.Rect({
x: 60,
y: 60,
width: 100,
height: 90,
fill: 'red',
name: 'rect',
draggable: true
});
layer.add(rect1);

var rect2 = new Konva.Rect({
x: 250,
y: 100,
width: 150,
height: 90,
fill: 'green',
name: 'rect',
draggable: true
});
layer.add(rect2);
layer.draw();

stage.on('click', function (e) {
// if click on empty area - remove all transformers
if (e.target === stage) {
stage.find('Transformer').destroy();
layer.draw();
return;
}
// do nothing if clicked NOT on our rectangles
if (!e.target.hasName('rect')) {
return;
}
// remove old transformers
// TODO: we can skip it if current rect is already selected
stage.find('Transformer').destroy();

// create new transformer
var tr = new Konva.Transformer();
layer.add(tr);
tr.attachTo(e.target);
layer.draw();
})
</script>

</body>

</html>