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.

Subscriber Content

We can create a konva transformer object as shown below

Next, we can add transformer to layer and connect it with shape/group as shown below:

rest of the code is not changed from previous post.

With these changes in place, if we now visit the UI, we can see handles on the circle.

we can use those for transformations

Next, we can also pass a configuration object to transformer which allows us to style it further:

Following is the output of the configuration

That’s all for today

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!