Summary  
This chapter explains how to implement interactive transformation—resizing and rotation—of canvas shapes using a Transformer tool with draggable handles.

General domain of usage  
diagramming apps

When building interactive canvas applications, allowing users to manipulate shapes visually is essential for an intuitive editing experience. In Konva.js, the **Transformer tool** provides a powerful way to enable interactive resizing and rotation of shapes directly on the canvas. The Transformer acts like a selection box with handles, letting users grab, stretch, and rotate objects with the mouse. This tool is a key component in whiteboard and diagramming apps, making it possible for users to modify objects without needing to enter precise values or use external controls.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8+CiAgICA8c3R5bGU+CiAgICAgIGJvZHkgewogICAgICAgIG1hcmdpbjogMjBweDsKICAgICAgfQogICAgICAjY29udGFpbmVyIHsKICAgICAgICBib3JkZXI6IDFweCBzb2xpZCAjY2NjOwogICAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jazsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGlkPSJjb250YWluZXIiPjwvZGl2PgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0va29udmFAOS9rb252YS5taW4uanMiPjwvc2NyaXB0PgogICAgPHNjcmlwdCBzcmM9InNjcmlwdC5qcyI+PC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

Ly8gQ3JlYXRlIHN0YWdlIGFuZCBsYXllcgpjb25zdCBzdGFnZSA9IG5ldyBLb252YS5TdGFnZSh7CiAgY29udGFpbmVyOiAiY29udGFpbmVyIiwKICB3aWR0aDogNjAwLAogIGhlaWdodDogNDAwCn0pOwoKY29uc3QgbGF5ZXIgPSBuZXcgS29udmEuTGF5ZXIoKTsKc3RhZ2UuYWRkKGxheWVyKTsKCi8vIEFkZCBhIHJlY3RhbmdsZSBzaGFwZQpjb25zdCByZWN0ID0gbmV3IEtvbnZhLlJlY3QoewogIHg6IDE1MCwKICB5OiAxMDAsCiAgd2lkdGg6IDEyMCwKICBoZWlnaHQ6IDgwLAogIGZpbGw6ICJza3libHVlIiwKICBzdHJva2U6ICJibGFjayIsCiAgc3Ryb2tlV2lkdGg6IDIsCiAgZHJhZ2dhYmxlOiB0cnVlCn0pOwpsYXllci5hZGQocmVjdCk7CgovLyBBZGQgYSBjaXJjbGUgc2hhcGUKY29uc3QgY2lyY2xlID0gbmV3IEtvbnZhLkNpcmNsZSh7CiAgeDogNDAwLAogIHk6IDIwMCwKICByYWRpdXM6IDUwLAogIGZpbGw6ICJsaWdodGdyZWVuIiwKICBzdHJva2U6ICJibGFjayIsCiAgc3Ryb2tlV2lkdGg6IDIsCiAgZHJhZ2dhYmxlOiB0cnVlCn0pOwpsYXllci5hZGQoY2lyY2xlKTsKCi8vIENyZWF0ZSBhIHRyYW5zZm9ybWVyIGJ1dCBkb24ndCBhdHRhY2ggdG8gYW55dGhpbmcgeWV0CmNvbnN0IHRyYW5zZm9ybWVyID0gbmV3IEtvbnZhLlRyYW5zZm9ybWVyKCk7CmxheWVyLmFkZCh0cmFuc2Zvcm1lcik7CgovLyBIZWxwZXIgZnVuY3Rpb24gdG8gYXR0YWNoIHRyYW5zZm9ybWVyIHRvIGEgc2hhcGUKZnVuY3Rpb24gYXR0YWNoVHJhbnNmb3JtZXIoc2hhcGUpIHsKICB0cmFuc2Zvcm1lci5ub2Rlcyhbc2hhcGVdKTsKICBsYXllci5kcmF3KCk7Cn0KCi8vIExpc3RlbiBmb3Igc2hhcGUgc2VsZWN0aW9uCltyZWN0LCBjaXJjbGVdLmZvckVhY2goKHNoYXBlKSA9PiB7CiAgc2hhcGUub24oImNsaWNrIiwgKCkgPT4gewogICAgYXR0YWNoVHJhbnNmb3JtZXIoc2hhcGUpOwogIH0pOwp9KTsKCi8vIERlc2VsZWN0IHRyYW5zZm9ybWVyIHdoZW4gY2xpY2tpbmcgb24gZW1wdHkgc3BhY2UKc3RhZ2Uub24oImNsaWNrIiwgKGUpID0+IHsKICBpZiAoZS50YXJnZXQgPT09IHN0YWdlKSB7CiAgICB0cmFuc2Zvcm1lci5ub2RlcyhbXSk7CiAgICBsYXllci5kcmF3KCk7CiAgfQp9KTsKCmxheWVyLmRyYXcoKTs=

What is the primary function of the Transformer tool in Konva.js?

Build interactive canvas based applications using Konva JS and JavaScript. Learn to work with stages, layers, shapes, events, drawing tools, text, and images to create rich canvas experiences. Apply these skills to design whiteboard style editors, diagram tools, and other custom interactive canvas interfaces.

Learn the core ideas behind Konva.js and how its stage and layer model works. Build a foundation for drawing and manipulating shapes on the canvas with JavaScript.

Add interactivity to canvas elements by enabling dragging, resizing, and transforming shapes. Handle user events to make the canvas respond to clicks, drags, and other actions.

Create whiteboard style features using drawing tools, editable text, and images. Combine these elements to build simple diagram, annotation, or sketching interfaces.

Use grouping and layer management to organize complex scenes and prepare them for saving or export. Apply everything learned to build practical projects such as a diagram editor and a collaborative style whiteboard prototype.

Transforming and Resizing Objects

Transforming and Resizing Objects