角度材質選項卡中的Fabricjs畫布不起作用

Question

我一直在嘗試使用角度材質選項卡（material.angularjs.org/latest/demo/tabs）中的Fabric.canvas，但似乎不起作用。 最後，我想要有多個畫布與多個畫布。現在我只用一個選項卡來嘗試它。

This code without tabs seems to wok just fine, it allows free hand drawing with mouse pointer

但是，在這兩個文件用

this html code with angular material tabs doesn't let any drawing or event on the canvas

的JavaScript代碼（在結束時）是相同的

Answer 1

我們需要等待的角選項卡初始化畫布前加載。

如果畫布首先被初始化，然後角度標籤加載，那麼原始畫布不再存在。

因此，使用setTimeout（some_function_to_init_canvas，50）初始化畫布將允許足夠的時間讓角標籤首先加載。

這工作正常，但回調函數將是更可取的。

Answer 2

首先火角標籤事件，則火災織物事件這是我的工作

剛剛對於fabricjs。多個選項卡也可以使用此方法的setTimeout函數。

這樣

function trigger(){ 
    var canvas = new fabric.Canvas("myCanvas"); 
    console.log(canvas); 
    canvas.setWidth(400); 
    canvas.setHeight(400); 
    canvas.isDrawingMode = true; 
    console.log(canvas.isDrawingMode); 
} 

    var drawingapp = angular.module('drawingapp', ['ngMaterial']); 
    drawingapp.controller('drawing_controller', function($scope, $http, $log, $document) { 

    }); 
    setTimeout(trigger, 50); //<----- here 

工作DEMO