在paper.js中将画布数据拟合到另一个画布

如何解决在paper.js中将画布数据拟合到另一个画布

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

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

在这里，我首先使用importJSON加载画布并设置视图。但是，并非所有内容都是可见的。如何将importJSON的内容适合画布。

解决方法

您可以简单地调整导入图层的大小以适合第二张画布View的边界。

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

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

layer.fitBounds(view.bounds)

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