在相同的html canvas元素上放置并创建Fabric画布后，无法选择对象

debugcn 发表于 Dev

ush

基本上：

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

在第二次处理并创建了fabric.Canvas之后，无法选择画布上的对象。如何在不创建新的html canvas元素的情况下使其工作？

夏尔马水库

我不知道使用时会发生什么，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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。