Angular 材质选项卡中的 Fabricjs 画布不起作用答案

【问题标题】：Fabricjs canvas inside Angular Material Tabs doesn't workAngular 材质选项卡中的 Fabricjs 画布不起作用
【发布时间】：2016-08-08 05:50:16
【问题描述】：

我一直在尝试在有角度的材质选项卡 (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代码（最后）是相同的

【问题讨论】：

标签： javascript angularjs fabricjs angular-material

【解决方案1】：

在初始化画布之前，我们需要等待角度选项卡加载。

如果首先初始化画布，然后加载角度选项卡，则原始画布不再存在。

因此，使用 setTimeout(some_function_to_init_canvas, 50) 初始化画布将允许有足够的时间先加载角度选项卡。

这很好用，但回调函数会更可取。

【讨论】：

【解决方案2】：

首先触发 angular tab 事件，然后触发 fabric 事件，这对我有用

只需为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

【讨论】：