将 paper.js canvas 与 'regular' canvas 同步

Question

我已经在做的事情：

我有一个 Paper.js canvas 工作正常
就在它下面（位置相同，大小相同），我还有一个 canvas（普通的，没有paper.js绑定到这个）。
每隔一段时间，我将paper.js的内容复制到canvas 使用 canvas 本机 drawImage() 命令

我的问题是：

如何根据 zooming/panning 同步 2？

我希望能够滚动和缩放下面的View和canvas来做同样的事情，这样当我复制paper.js canvas 与常规 canvas 项目看起来相同（已经存在的项目也应该 zoomed/panned 与 paper.js canvas 一起）

我已经在下面的 canvas 上尝试了 canvas.scale(2,2)，在我的 Paper.js canvas 上尝试了 view.zoom = 2;，但是这两个在术语上不能很好地结合在一起具有相同的 positions/translations 和缩放功能。我知道当放大第二个时，已经放置的绘图会像素化 canvas - 但我真的不介意。

Answer 1

您可以获取矩阵对象并将其应用于您的常规 canvas。我不熟悉 paper.js 但你应该可以这样做：

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

有关详细信息，请参阅以下内容：

将 paper.js canvas 与 'regular' canvas 同步

Synchronizing a paper.js canvas with a 'regular' canvas

canvas

html5-canvas

paperjs