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设置fabricjs功能。多个标签也适用于此方法。

像这样

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，然后加载角度选项卡，则原始画布不再存在。

因此，使用setTimeout（some_function_to_init_canvas，50）初始化画布将允许有足够的时间首先加载角度标签。

这样可以正常工作，但回调函数会更合适。

Angular Material Tabs中的Fabricjs画布不起作用

2 个答案: