Fabricjs canvas inside Angular Material 选项卡不起作用

Question

我一直在尝试在 angular material 选项卡 (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

首先触发 angular 选项卡事件，然后触发 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

Answer 2

在初始化 canvas 之前，我们需要等待 angular 选项卡加载。

如果先初始化 canvas，然后加载 angular 选项卡，则原来的 canvas 不存在。

因此，使用 setTimeout(some_function_to_init_canvas, 50) 初始化 canvas，将为 angular 选项卡预加载足够的时间。

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

Fabricjs canvas inside Angular Material 选项卡不起作用

Fabricjs canvas inside Angular Material Tabs doesn't work

javascript

fabricjs

angularjs

angular-material