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的选择机制在次级层上不起作用。当我在对象上尝试object:selected或mouse:down时，没有任何反应。默认情况下发生的蓝色鼠标拖动选择也不存在。

奇怪的是，如果我交换包含画布的divs，则选择在辅助图层上工作，“排序”在主图层上工作（从鼠标所在位置“关闭”）。

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

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

更新：

我注意到，如果我移动到辅助画布并召唤Chrome网络开发工具，画布就能完美运行。另一方面，如果我旋转到主画布，那么在我召唤Chrome网络开发工具之前，那个画布不起作用。奇怪。

Answer 1

我发现这实际上是一个AngularJS问题，而不是FabricJS问题。问题源于这样一个事实，即每当我从一个层旋转到另一个层时，我立即调用calcOffset()而不等待scope正确传播到DOM。这意味着FabricJS不知道画布在那里。我通过添加：

基本上等待scope传播来解决这个问题

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

两个画布在Fabric.js中相互叠加

1 个答案: