La tela FabricJS è "bloccata" dopo l'aggiunta di elementi

Question

Sto creando un'applicazione utilizzando fabric.js e ho riscontrato un comportamento davvero strano. Sto aggiungendo sia le immagini che le istanze di testo, utilizzando il normale fabric.Canvas (non fabric.StaticCanvas) e non sono in grado di spostare o ridimensionare questi elementi dopo l'aggiunta. Ho aggiunto solo un paio di ogni tipo. La funzionalità di base è avvolto in un callback legato ad un evento click su qualche tasto, ma la funzionalità del tessuto di base simile a questa (semplificato, ma quasi tutto è lo stesso per quanto riguarda codice relativo tessuto):

<canvas id="myCanvas" height=600 width=800></canvas> 
<input id="addStuff" type="button" value="Add!" /> 
.... 
var canvas = new fabric.Canvas('myCanvas'); 
canvas.renderOnAddition = true; 

$(function(){ 
    $('#addStuff').on('click', function(e) { 

     var text = new fabric.Text("Hello, world", { 
     top  : 100, 
     left  : 100, 
     fontSize : 12, 
     fontFamily : 'Delicious_500' 
     }); 
     text.hasControls = false; 

     canvas.add(text); 

     fabric.Image.fromURL('./img/pic.png', function(img) { 
     var imgX = img.set({ 
      top: 200, 
      left: 100, 
     }); 

     canvas.add(imgX); 
     }); 

     canvas.renderAll(); 
    }); 
}); 

Il codice sopra rende bene gli elementi, ma non possono essere ridimensionati o spostati, e agire statici. La cosa strana è che se apro e chiudo il mio chrome dev-panel (usando F12 o [Ctrl/CMD] + SHIFT + I due volte), la tela recupera la funzionalità e tutto funziona di nuovo. Ho anche qualche cosa del serveride che sta accadendo (questo è solo un assaggio di quello che sto facendo), ma non ho idea di come rintracciare ulteriormente questo strano comportamento. Sto usando il codice più recente (creato da github repo). Pensieri?

Answer 1

È possibile che l'offset interno della tela non venga aggiornato correttamente. Qualcosa nella pagina potrebbe cambiare le dimensioni/posizione, rendendo la tela posizionata in una posizione diversa da quella che era durante l'inizializzazione. Prova a chiamare canvas.calcOffset() dopo la chiamata renderAll() o dopo aver aggiunto tali oggetti.

Il motivo calcOffset non è chiamato in renderAll per motivi di prestazioni. renderAll è un ridisegno di un'intera tela. Succede ogni volta che qualcosa cambia su tela e tela deve essere ridisegnato. Come potete immaginare, viene chiamato abbastanza spesso (a volte decine di volte al secondo), e sarebbe abbastanza dispendioso calcolare il nuovo offset ogni volta che avviene il ridisegno.

Considera anche che nella maggior parte dei casi la posizione della tela non cambia durante la durata della pagina. Probabilmente accade molto raramente. Principalmente durante il caricamento della pagina.

In un ambiente altamente dinamico, in cui la tela cambia spesso posizione, è possibile risolvere il "problema" di offset chiamando esplicitamente calcOffset().

Answer 2

Ho avuto lo stesso problema, in aggiunta alla soluzione kangax, in un ambiente MOLTO estremo, è possibile forzarlo a ricalcolare l'offset ogni volta che il rendering si verifica, con un evento.

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