在同一个 html canvas 元素上放置和创建 fabric canvas 后，无法选择对象

Question

基本上：

let fabricCanvas = new fabric.Canvas('c');
fabricCanvas.add(
  new fabric.Rect({ left: 10, top: 10, fill: 'red', width: 20, height: 20 })
); // 1. Initialize fabric wrapper for the 1st time
fabricCanvas.dispose(); // 2. Dispose it
fabricCanvas = new fabric.Canvas('c');    
fabricCanvas.add(
  new fabric.Rect({ left: 100, top: 100, fill: 'red', width: 20, height: 20 })
); // 3. Initialize fabric wrapper for the 2nd time

在 html canvas 上第二次配置和创建 fabric.Canvas 后，canvas 上的对象不可选。如何在不创建新的 html canvas 元素的情况下使其工作？

Answer 1

我不知道当我们使用 dispose() 时会发生什么，因为我试过这个我发现了这背后的原因。

当我们 dispose() 并使用 fabricjs 面料创建新的 canvas 时，另外添加另一个鞋面 canvas 这是问题所在。所以我们在使用 dispose() 时以编程方式删除上层 canvas 。问题已解决。

这里

var canvas  = new fabric.Canvas('c');
var rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill:  "#FF0000",
        stroke: "#000",
        width: 100,
        height: 100,
        strokeWidth: 10, 
        opacity: .8      
    });

canvas.add(rect);

canvas.dispose()

$(".upper-canvas").remove();     //<------- here we remove

canvas  = new fabric.Canvas('c');

 var rect2 = new fabric.Rect({
        left: 100,
        top: 100,
        fill:  "green",
        stroke: "#000",
        width: 100,
        height: 100,
        strokeWidth: 10, 
        opacity: .8      
    });
canvas.add(rect2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>


<canvas id="c" width="500" height="300"></canvas>

在同一个 html canvas 元素上放置和创建 fabric canvas 后，无法选择对象

Objects aren't selectable after disposing and creating fabric canvas over the same html canvas element

javascript

fabricjs