如何使用 canvas 大小更改来调整和重新定位 PaperJs 绘图？

Question

我正在使用 Paperjs 创建一个应用程序以在图像上绘制一些草图，在没有背景的情况下保留草图并显示草图和背景图像。

在我的 Paperjs canvas 中，我有一个光栅图像，在它之上我正在制作一些草图指向背景图像的一部分。绘图完成后，我正在执行 JSON 导出，不包括背景光栅图像，以保留绘图。现在，当我将它导出回来时，背景光栅图像是动态生成的，并且 Paper canvas 大小设置为图像的大小。但是，如果浏览器 window 大小不同，则图像的大小将与创建原始绘图的位置不同。

如果在创建草图时未使用图像尺寸，它指向图像的不同部分，我将面临这个问题。有什么方法可以按比例更改 paperjs 绘图，使草图指向背景光栅图像的同一点？

如有任何帮助，我们将不胜感激。

下面是一个例子：

以实际尺寸-

调整后

Answer 1

我可以通过以下更改实现我想要的。感谢@arthur.sw 的帮助。这里 originalViewSize 是创建实际草图的原始尺寸。

步骤：

更新视图大小
计算x轴和y轴比例因子
更新背景图像的范围
更新活动图层位置
缩放活动图层

// 更改视图大小并计算 x 和 y 轴的比例因子

paperScope.view.viewSize = new Size(originalViewSize.width + 200, originalViewSize.height + 100);
const xScale = paperScope.view.viewSize.width /originalViewSize.width;
const yScale = paperScope.view.viewSize.height /originalViewSize.height;

//更新b/g图像边界

backgroundRaster.bounds = paperScope.view.bounds;
paperScope.project.activeLayer.position.x = paperScope.project.activeLayer.position.x * xScale;
paperScope.project.activeLayer.position.y = paperScope.project.activeLayer.position.y * yScale;
paperScope.project.activeLayer.scale(xScale, yScale);

如何使用 canvas 大小更改来调整和重新定位 PaperJs 绘图？

How to resize and reposition PaperJs drawing with canvas size change?

paperjs