Nesneler, aynı html kanvas öğesi üzerinde aynı html kanvas öğesi üzerine yerleştirildikten ve seçildikten sonra seçilemez:

Question

İşte bir codepen exaple. Temel olarak

:

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 

yerleştirilmesi ve ikinci kez bir html tuval üzerinde fabric.Canvas oluşturduktan sonra, tuval üzerinde nesneler seçilemez. Yeni bir html tuval öğesi oluşturmadan nasıl çalışır?

Answer 1

dispose()'u kullandığımızda ne olduğunu bilmiyorum çünkü bununla oynamış olmanın sebebinin ne olduğunu buldum.

biz dispose() ve fabricjs kumaş ile yeni bir tuval oluşturduğunuzda, bu sorunu başka bir üst tuval ekleyin. dispose() kullandığımızda üst tuvali programatik olarak kaldırıyoruz. sorun çözüldü. Burada

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>