paper.js有没有办法只缩放画布的一部分而不是整个？

Question

我正在构建一个Webtools，其中包含画布内的两个部分：

• 第一部分用于选择路径

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

现在，我想在第一部分上实现缩放。我在纸上看到那个视图对象。js具有缩放功能。在google上搜索后，我找到了这个https://gist.github.com/ryascl/4c1fd9e2d5d0030ba429简单缩放的解决方案。

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

Answer 1

我认为这个问题有两种可能的解决方案：

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

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

就个人而言，我会使用另一种解决方案，包括管理两个独立的画布，初始化<代码>纸张。js在每一个上生成两个不同的PaperScope实例
然后您将能够控制视图。缩放每个画布<这里有一把小提琴演示这个解决方案。

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