HTML5 Canvas Shape select, resize and rotate

WARNING! This feature is experimental.

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

To enable it you need to:

  1. Create new instance with new Konva.Transformer
  2. Add it to layer
  3. attach to a node with transformer.attachTo(node)

Note: Transforming tool is not changing width and height properties of nodes when you resize them. Instead it changes scaleX and scaleY properties.

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://cdn.rawgit.com/konvajs/konva/2.1.6/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>