时间戳

首页 > 解决方案 > 如何使用画布大小更改调整 PaperJs 绘图的大小和重新定位？

paperjs - 如何使用画布大小更改调整 PaperJs 绘图的大小和重新定位？

问题描述

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

在我的 Paperjs 画布中，我有一个光栅图像，除此之外，我正在制作一些草图，指向背景图像的一部分。绘图完成后，我正在进行 JSON 导出，不包括背景光栅图像，以保持绘图。现在，当我将其导出回来时，会动态生成背景光栅图像，并将 Paper canvas 大小设置为图像的大小。但是，如果浏览器窗口大小不同，则图像的大小将与创建原始图形的位置不同。

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

任何帮助，将不胜感激。

下面是一个例子：

与实际尺寸 -

在此处输入图像描述

调整大小后

在此处输入图像描述

标签： paperjs

解决方案

通过以下更改，我可以实现我想要的。感谢@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);

推荐阅读