Fabricjs Canvas in Angular Material Tabs funktioniert nicht

Question

Ich habe versucht, Fabric.canvas in eckigen Material Registerkarten (material.angularjs.org/latest/demo/tabs) zu verwenden, aber das scheint nicht zu funktionieren. Endlich möchte ich, dass es mehrere Registerkarten mit mehreren Leinwänden gibt. Im Moment versuche ich es mit nur einem Tab.

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

Aber

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

Der Javascript-Code (am Ende) verwendet, um sowohl in den Dateien sind der gleiche

Answer 1

Wir müssen warten, bis die Winkellaschen vor dem Laden die Leinwand zu initialisieren.

Wenn Canvas zuerst initialisiert wird und dann die eckigen Registerkarten geladen werden, ist der ursprüngliche Canvas nicht mehr vorhanden.

Wenn also die Zeichenfläche mit setTimeout (some_function_to_init_canvas, 50) initialisiert wird, würde genügend Zeit für das Laden von eckigen Registerkarten ausreichen.

Dies funktioniert gut, aber eine Callback-Funktion wäre vorzuziehen.

Answer 2

Erstes Feuer Winkellasche Ereignis, dann Feuer Stoff Ereignis das ist Arbeit für mich

nur se t setTimeout funtion für fabricjs. multiple tabs funktionieren auch mit dieser Methode.

wie diese

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 

Arbeits DEMO