Search code examples
javascripthtml5-canvasresizepaperjs

How to resize a group of path in PaperJS


With 3 points, I am trying to achieve: rotate, move and resize after grouping them to any Path. Path can be any regular polygon shape.

So far it is rotating and moving well smoothly. However it fails on resizing.

Here is the sketch.

Can someone guide or correct?

Note: the sketch was updated to move when shape is also dragged.


Solution

  • The key is to use the point argument of the item.scale() method.
    It allows scaling the item around a custom point and not around its center, which is the default behavior.
    You also have to cancel the group dragging when the scaling operation is active, like you already do with the rotation.
    Here is a sketch demonstrating a simplified solution to your problem (only handles uniform scaling) that should get you on the track.