html - Fabric.js 中的两个 Canvas 相互叠加

Question

我正在尝试创建一个具有两个基本层的图像处理应用程序。用户可以在窗口中同一位置的主层和次层之间“旋转”。为此，我有这样的代码:

               <div ng-hide="layer != 'main'">
                    <canvas id="main-layer"></canvas>
                </div>
               <div ng-hide="layer != 'secondary'">
                    <canvas id="secondary-layer"></canvas>
               </div>

Angular 代码不应影响此处的问题。每当选择主图层时，辅助图层的 CSS 显示属性设置为无

               display: none !important

问题是FabricJS的选择机制在secondary layer上不起作用。当我尝试在对象上使用 object:selected 或 mouse:down 时，没有任何反应。默认情况下发生的蓝色鼠标拖动选择也不存在。

奇怪的是，如果我交换包含 Canvas 的 divs，则选择在第二层起作用，而“有点”在主层起作用(它与鼠标所在的位置“关闭”) .

               <div ng-hide="layer != 'secondary'">
                      <canvas id="secondary-layer"></canvas>
               </div>                   
               <div ng-hide="layer != 'main'">
                      <canvas id="main-layer"></canvas>
               </div>

有没有办法在 FabricJS 中实际堆叠 Canvas ？

更新:

我注意到，如果我转到辅助 Canvas 并调用 Chrome 网络开发工具， Canvas 会完美运行。另一方面，如果我旋转到主 Canvas ，则在调用 Chrome 网络开发工具之前，主 Canvas 不起作用。奇怪。

Answer 1

我发现这实际上是 AngularJS 的问题，而不是 FabricJS 的问题。问题源于这样一个事实，即每当我从一层旋转到另一层时，我都会立即调用 calcOffset() 而无需等待 scope 正确传播到 DOM。这意味着 FabricJS 不知道 Canvas 在那里。我基本上是等到 scope 通过添加传播来解决这个问题:

$timeout(function() { scope.canvas.calcOffset(); }, 0);