在paper.js中，有没有一种方法可以仅缩放画布的一部分而不是整个画布？

Question

我正在构建一个在画布内部具有两个部分的Webtool：

• 第一部分用于选择路径。
• 第二部分用于放置此路径（用它们编写）

我正在将paper.js用于画布内的所有功能。我为不同的部分制作了两层，并通过跟踪鼠标位置在它们之间切换。

现在，我想对第一部分进行缩放。我看到paper.js中的view对象带有缩放功能。经过一番谷歌搜索后，我发现此https://gist.github.com/ryascl/4c1fd9e2d5d0030ba429解决方案可用于简单缩放。

现在是我的问题；如果我使用此缩放，则整个画布将被放大/缩小。这不是我所需要的。我只需要在第一部分进行缩放。有没有办法只缩放特定区域或特定图层？

Answer 1

我看到此问题的两种可能的解决方案：

解决方案1 ​​

您可以使用item.scale()而不是view.zoom直接缩放项目。
您可能会遇到的问题是您的图层肯定会重叠，因此您可以将此方法与group.clipped结合使用以掩盖您的图层溢出。
这是sketch演示了此解决方案。

// 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...

解决方案2

我个人将采用另一种解决方案，包括管理2个单独的画布，在每个画布上初始化Paper.js以产生2个不同的PaperScope实例。
然后，您将可以为每个画布控制view.zoom。
这是fiddle演示了此解决方案。

// 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;