is there a way in paper.js to zoom just a part of the canvas instead of the whole?

Question

I am building a Webtool with two sections inside the canvas:

• The first section is for selecting paths.
• the second section is for placing this paths (writing with them)

I am using paper.js for all the functions inside the canvas. I made two layers for the different Sections and switch between them by tracking the mouse position.

Now i want to implement a zoom on the first section. I saw that the view object in paper.js comes with a zoom function. After some googling I found this https://gist.github.com/ryascl/4c1fd9e2d5d0030ba429 solution for a simple zoom.

Now my problem; if i use this zoom the whole canvas gets zoomed in/out. This is not what I need. I need the zoom only on the first section. Is there a way to zoom just a certain area, or maybe a certain layer?

Answer 1

I see 2 possible solutions for this problem:

solution 1

You can directly scale your items by using item.scale() instead of using view.zoom.
The problem that you might encounter is that your layer will certainly overlap so you could combine this approach with group.clipped to mask your layer overflow.
Here is a sketch demonstrating this solution.

// Draw a line materializing layers separation.
new Path.Line({
    from: view.bounds.topCenter,
    to: view.bounds.bottomCenter,
    strokeColor: 'black'
});

// Draw a rectangle that will be used to crop the layer.
var cropRectangle = new Path.Rectangle({
    from: view.bounds.toLeft,
    to: view.bounds.bottomCenter
});

// Draw a circle in the left part of the screen.
var circle = new Path.Circle({
    center: [view.bounds.leftCenter.x + view.center.x / 2, view.center.y],
    radius: 50,
    fillColor: 'orange'
});

// Create a group that will be used to pan/zoom left part.
var group = new Group([circle]);

// Create left part layer and crop it with the rectangle so that overflow is
// hidden.
var layer = new Layer([cropRectangle, group]);
layer.clipped = true;

// Directly manipulate the group when you want to pan/zoom.
group.translate(view.bounds.width / 4, 0);
group.scale(1.5);

// You can use the same architecture for the right part...

solution 2

Personally, I would go with another solution consisting of managing 2 separated canvas, initializing Paper.js on each one to produce 2 distinct PaperScope instances.
Then you will be able to control view.zoom for each of those canvases.
Here is a fiddle demonstrating this solution.

// Initialize paper scopes.
var scope1 = new paper.PaperScope();
scope1.setup(document.getElementById('canvas1'));

var scope2 = new paper.PaperScope();
scope2.setup(document.getElementById('canvas2'));

// Draw a circle on left canvas.
new paper.Path.Circle({
    center: scope1.view.center,
    radius: 50,
    fillColor: 'orange',
    parent: scope1.project.activeLayer
});

// Draw a circle on right canvas.
new paper.Path.Circle({
    center: scope2.view.center,
    radius: 50,
    fillColor: 'blue',
    parent: scope2.project.activeLayer
});

// Zoom in left canvas.
scope1.view.zoom = 2;

// Zoom out right canvas.
scope2.view.zoom = 0.5;