在 paperjs 中将 canvas 数据拟合到另一个 canvas

Question

我正在尝试将 paperjs canvas 放入另一个 canvas。我正在使用 importJSON 将 canvas 导入当前的 paperjs canvas 对象。但是，2 canvases 的大小不同，因此并非所有内容都可见。我试图设置 paperjs 项目的视图，但这没有用。这是我试过的：

canvasObj.project.importJSON(tabData.dataUrl);
canvasObj.project.view.viewSize = new paper.Size(window.innerWidth - this.canvasWidthSubtract, window.innerHeight - this.canvasHeightSubtract);

在此，我首先使用 importJSON 加载 canvas 并设置视图。但是，并非所有内容都是可见的。如何使 importJSON 的内容适合 canvas.

Answer 1

您可以简单地调整导入图层的大小以适应第二个 canvas 的 View 的边界。

您可以使用 item.fitBounds 方法轻松完成此操作，如下图所示。

const imported = project.importJSON(`[["Layer",{"applyMatrix":true,"selected":true,"children":[["Path",{"applyMatrix":true,"selected":true,"segments":[[351.69873,371.5],[395,296.5],[438.30127,371.5]],"closed":true,"fillColor":[0.91373,0.91373,1]}],["Path",{"applyMatrix":true,"selected":true,"segments":[[479.54915,481.55283],[454.54915,463.38926],[445,434],[454.54915,404.61074],[479.54915,386.44717],[510.45085,386.44717],[535.45085,404.61074],[545,434],[535.45085,463.38926],[510.45085,481.55283]],"closed":true,"fillColor":[0.91373,0.91373,1]}]]}]]`)
const layer = imported.pop()

layer.fitBounds(view.bounds)

上面的示例导入通过 project.exportJSON 导出的 JSON，然后调整它的大小以始终适合导入的视图 bounds/size。

在 paperjs 中将 canvas 数据拟合到另一个 canvas

Fitting a canvas data to another canvas in paperjs

canvas

paperjs