Angular Material Tabs内部的Fabricjs画布;不起作用

Fabricjs canvas inside Angular Material Tabs doesn't work

本文关键字：画布 不起作用 Fabricjs Material Tabs 内部 Angular      更新时间：2023-09-26

我一直试图在有角度的材料选项卡（material.angularjs.org/latest/demo/tables）中使用Fabric.canvas，但似乎不起作用。最后，我希望有多个选项卡和多个画布。现在我只尝试一个标签。

这个没有标签的代码似乎工作得很好，它允许用鼠标指针自由手绘

但是，

这个带有角度材质选项卡的html代码不允许任何绘图或事件出现在画布上

两个文件中使用的javascript代码（末尾）是相同的

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

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

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

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

首先发射角度标签事件，然后发射织物事件这对我来说是有效的

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

工作演示

相关文章：