Konva — Transforming Shapes

Jawadhasan
3 min readAug 14, 2024
Photo by Wander Fleur on Unsplash

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

--

--

Jawadhasan

Software Solutions Team Lead | Cloud Architect | Solutions Architect