在同一 html 画布元素上处理和创建织物画布后，对象不可选择答案

【问题标题】：Objects aren't selectable after disposing and creating fabric canvas over the same html canvas element在同一 html 画布元素上处理和创建织物画布后，对象不可选择
【发布时间】：2016-07-21 08:05:06
【问题描述】：

这是codepen exaple。

基本上：

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 画布上处理和创建 fabric.Canvas 后，画布上的对象无法选择。如何在不创建新的 html canvas 元素的情况下使其工作？

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

我不知道当我们使用dispose() 时会发生什么，因为我玩过这个我发现这是什么原因。

当我们dispose() 并使用fabricjs 织物创建一个新画布时，另外添加另一个上部画布，这是问题。因此，当我们使用 dispose() 时，我们会以编程方式删除上部画布。问题解决了。

这里

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>

【讨论】：