Fabric.js上的兩個畫布在彼此的頂部

我想創建一個圖像處理應用程序，它有兩個基本層。用戶可以在窗口中相同位置的主層和次層之間進行「旋轉」。要做到這一點，我有這樣的代碼：Fabric.js上的兩個畫布在彼此的頂部

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

角碼不應該減損這裏的問題。只要選擇主層，所述第二層的CSS顯示屬性被設置爲無

   display: none !important

的問題是，FabricJS的選擇mechamism不次級層上工作。當我嘗試在對象上嘗試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實際堆疊畫布？

UPDATE：

我注意到，如果我移動到二次帆布和召喚Chrome網上應用開發工具，在畫布上完美的作品。另一方面，如果我旋轉到主畫布，那麼在我召喚Chrome網頁開發工具之前，該畫布無法正常工作。奇怪。

來源

2014-01-07 Alexander Ventura

我發現這實際上是一個AngularJS問題，而不是FabricJS問題。這個問題源於這樣一個事實：無論何時我從一層到另一層旋轉，我都會立即致電calcOffset()，而無需等待scope正確傳播到DOM。這意味着FabricJS不知道畫布在那裏。我解決了這個問題，基本上等到scope已經傳播加入：

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

來源

2014-01-07 11:36:58

Fabric.js上的兩個畫布在彼此的頂部

回答

相關問題