在 DOM 中添加新元素后，FabricJS canvas 停止工作

Question

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

我试过的方法：我已经尝试在更改 DOM（或添加新的 div）时重新初始化 canvas，但它仍然卡住。当我第一次加载页面并且没有添加新元素时它工作正常。

参考资料 Link：This 伙计遇到了我面临的同样问题，但是建议的解决方案对我的情况不起作用。

$(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() 但是，它没有任何区别。提前感谢您的帮助。

Answer 1

我通过添加解决了

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

每个 canvas。完整代码变成如下：

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;

在 DOM 中添加新元素后，FabricJS canvas 停止工作

FabricJS canvas stops working after new elements are added in the DOM

javascript

canvas

html5-canvas

fabricjs