将 paper.js 画布与“常规”画布同步

Question

我已经在做的事情：

• 我有一个 Paper.js 画布工作得很好
• 就在它下方（相同位置，相同大小），我还有另一个 画布（普通的，没有绑定到这个的paper.js）。
• 每隔一段时间，我将 paper.js 画布的内容复制到 使用 canvas 原生 drawImage() 命令的常规画布

---

我的问题是这样的：

如何在缩放/平移方面同步 2？

我希望能够滚动和缩放View 和下面的画布以执行相同的操作，以便当我将 paper.js 画布复制到常规画布时，项目看起来相同（已经存在的项目也应该与 paper.js 画布一起缩放/平移）

我在下面的画布上尝试了canvas.scale(2,2)，在我的 Paper.js 画布上尝试了view.zoom = 2;，但是两者在具有相同的位置/翻译和缩放方面不能很好地配合使用。我知道在第二个画布上缩放时已经放置的绘图会像素化 - 但我并不介意。

Answer 1

您可以抓取矩阵对象并将其应用到您的常规画布上。我对 paper.js 不熟悉，但你应该可以这样做：

// aLayer by reference or via project.activeLayer
aLayer.matrix.applyToContext(yourOtherContextHere);

详情请参阅：

• activeLayer
• layer
• layer.matrix
• matrix