在 DOM 中添加新元素后，FabricJS 画布停止工作答案

【问题标题】：FabricJS canvas stops working after new elements are added in the DOM在 DOM 中添加新元素后，FabricJS 画布停止工作
【发布时间】：2021-10-15 07:27:39
【问题描述】：

问题：您好，我的单个页面中有 3 个画布元素。它们基本上都用于签名目的，所以我使用了fabric JS，这样用户就可以拥有类似笔的功能并绘制他们的签名。现在，在选择页面顶部的一些其他选项后，会动态添加新元素，这使得我的所有画布签名元素都卡住了，我无法在它们上面绘制任何东西。

我尝试了什么：我尝试在 DOM 更改（或添加新 div）时重新初始化画布，但它仍然卡住。当我第一次加载页面并且没有添加新元素时它工作正常。

参考链接：This dude 遇到了与我相同的问题，但建议的解决方案不适用于我的情况。

$(document).ready(function() {
    canvas_init1();
});
function canvas_init1() {
    //alert('canvas initialized...');
    var canvas = new fabric.Canvas('c1');
    canvas.isDrawingMode = true;
    canvas.freeDrawingBrush.width = 3;
    console.log(canvas);

    var pracCanvas = new fabric.Canvas('prac-canvas');
    pracCanvas.isDrawingMode = true;
    pracCanvas.freeDrawingBrush.width = 3;

    var patCanvas = new fabric.Canvas('pat-canvas');
    patCanvas.isDrawingMode = true;
    patCanvas.freeDrawingBrush.width = 3;
}

我也尝试添加 calcOffset() 和 renderAll()，但是没有任何区别。提前感谢您的帮助。

【问题讨论】：

标签： javascript canvas html5-canvas fabricjs

【解决方案1】：

我通过添加解决了它

canvas.on('after:render', function(){ this.calcOffset(); });

在每个画布上。完整代码如下：

var canvas = new fabric.Canvas('c1');
canvas.on('after:render', function(){ this.calcOffset(); });
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 1;
console.log(canvas);

var pracCanvas = new fabric.Canvas('prac-canvas');
pracCanvas.on('after:render', function(){ this.calcOffset(); });
pracCanvas.isDrawingMode = true;
pracCanvas.freeDrawingBrush.width = 1;

var patCanvas = new fabric.Canvas('pat-canvas');
patCanvas.on('after:render', function(){ this.calcOffset(); });
patCanvas.isDrawingMode = true;
patCanvas.freeDrawingBrush.width = 1;

【讨论】：