coordina Canvas in Fabric.js hanno compensato

Question

Ho appena iniziato con fabric.js e ho una (probabilmente principiante) errore:

Sto usando tessuto con jQuery con il seguente codice:

$(document).ready(function() { 

canvas = new fabric.StaticCanvas('scroller'); 

canvas.add(
    new fabric.Rect({ top: 0, left: 0, width: 140, height: 100, fill: '#f55' }) 
); 

}); 

Questo codice dovrebbe disegnare un rettangolo 140x100 sulla tela. Purtroppo, appare solo un quarto del rettangolo. Se cambio i valori superiore e sinistro in numeri più alti, sulla tela viene visualizzato un numero maggiore di rettangoli.

Quindi sembra che l'origine della tela non sia a 0/0, ma a sth. più alto.

Qualcuno sa come risolvere questo o quello che sto facendo male?

Grazie in anticipo, McFarlane

Answer 1

Ecco un link jsfiddle con alcuni esempi http://jsfiddle.net/pukster/sdQ7U/2/

La mia ipotesi è che fabric.js calcola tutto dall'origine (punto medio), in quanto è il disegno esattamente un quarto di un rettangolo anche con una tela 10 volte la dimensione del rettangolo. La mia ipotesi è che top e left si riferiscano effettivamente all'origine e non ai lati superiore e sinistro del riquadro di selezione immaginario. Il problema è che c'è poca documentazione su fabricjs. C'è un motivo che si sta utilizzando fabricjs e non easeljs

EDIT Ecco lo stesso violino ma con quadrati al posto dei rettangoli (è più chiaro) http://jsfiddle.net/pukster/sdQ7U/3/

EDIT OK ora sono quasi assolutamente certo che fabric.js utilizza il centro come top/left. Ho strappato il loro example off of their site e lo ho sovrapposto con il couterpart trasparente a quelle forme se fossero stati codificati in tela pura http://jsfiddle.net/pukster/uathZ/2/ (il bordo blu è il limite dell'elemento canvas).

Quello che vedete è che le caselle sono esattamente compensata dalla metà, ma il cerchio (ho disegnato solo un semicerchio altrimenti non sarebbe stato percepibile) è perfettamente sovrapposti. Questo è b/c in HTML Canvas, le coordinate del cerchio (x,y) si riferiscono all'origine e non in alto a sinistra. Non mi sono preoccupato del triangolo b/c la mia trigonometria è un po 'arrugginita. Personalmente ritengo che sia fuorviante utilizzare i termini top e left, quando x e sarebbero stati più rappresentativi e più brevi.

Answer 2

Sì, questo è altamente inaspettato e anche più non documentato.

Soluzione:

Set

originX: "left" 
originY: "top" 

per ogni oggetto creato.

modifica: o utilizzare kangax soluzione più semplice nel commento qui sotto.

Answer 3

Voglio commentare ma mi manca la reputazione di farlo. Comunque, ecco cosa succede quando faccio la seguente:

fabric.Object.prototype.originX = "left"; 
fabric.Object.prototype.originY = "top"; 

La forma viene reso bene, ma quando seleziono per il ridimensionamento o lo spostamento, si arriva Offset per una posizione diversa. L'approccio migliore sembra essere quello di impostare le coordinate per ogni oggetto separatamente usando il metodo set().