Search code examples
paperjs

How to Zoom to fit a paperJS canvas

I have multiple diagrams on a paperJS project. I want to display a smaller version that can fit a box. Say 500px X 350px. Now how can I zoom in or zoom out to fit the diagram in best possible way.

Solution

  • You can scale the group of items to make them fit in a given box.
    There is a convenient method to do that: item.fitBounds().

    Here is a sketch demonstrating the solution.

    new Path.Circle({
    center: view.center - 100,
    radius: 100,
    fillColor: 'orange'
});

new Path.Circle({
    center: view.center + 100,
    radius: 100,
    fillColor: 'blue'
});

project.activeLayer.fitBounds(view.bounds);