Konva – Transforming Shapes

Introduction

In previous post we started with Konva introduction and wired it up in our angular application. Today we’ll continue our journey and learn about another useful feature of konva which helps us implement transformations with very little effort.

If you haven’t already, please check the previous post for background information and we’ll be using same code base as starting point for today’s implementation.

Transformer

It is very common task in any app that involves drawing shapes is going to need to transform them. Shapes transformation actions involves making them wider, taller, rotate them, etc. Typically this involves showing which shape is the focus for the transformation, and provide some ‘handles’ or UI options for user to perform transformation.

A simple example of that you can see that when you draw a shape in PowerPoint as shown below. You can click the shape and transformer appear and now you can scale, rotate etc.

In Konva a transformer is used for this purpose.

Transformer Demo

Lets see a simple example of transformer in action. Source code is available from this git repo.

You can check the deployed application available on this link.

Summary

In this post we learnt what is konva transformer and how can we use it to allow users to perform transformations.

Let me know if you have some questions/comments. Till next time, Happy Coding!