coordina lienzo en Fabric.js han compensado

Question

acabo de empezar con fabric.js y tengo una (probablemente principiante) Error:

estoy usando tela con jQuery con el siguiente código:

$(document).ready(function() { 

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

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

}); 

Este código debe dibujar un Rectángulo de 140x100 en el lienzo. Lamentablemente, solo aparece un cuarto del rectángulo. Si cambio los valores superior e izquierdo a números más altos, aparecerá más rectángulo en el lienzo.

Parece que el origen del lienzo no está en 0/0, sino en el sth. mayor.

¿Alguien sabe cómo solucionar esto o lo que estoy haciendo mal?

Gracias de antemano, McFarlane

Answer 1

Aquí hay un enlace jsFiddle con algunos ejemplos http://jsfiddle.net/pukster/sdQ7U/2/

Mi conjetura es que fabric.js calcula todo, desde el origen (punto medio) ya que está llegando exactamente un cuarto de un rectángulo incluso con un lienzo 10 veces el tamaño del rectángulo. Mi suposición es que top y left en realidad se refieren al origen y no a los lados superior e izquierdo del cuadro delimitador imaginario. El problema es que hay muy poca documentación sobre fabricjs. ¿Hay alguna razón por la que está utilizando fabricjs y no easeljs

EDITAR Aquí está la misma violín pero con plazas en lugar de rectángulos (es más clara) http://jsfiddle.net/pukster/sdQ7U/3/

EDITAR OK Ahora estoy casi completamente seguro de que fabric.js usa el centro como top/left. Arranqué su example off of their site y lo superpuse con la couterpart transparente a esas formas si hubieran sido codificadas en lienzo puro http://jsfiddle.net/pukster/uathZ/2/ (el borde azul es el límite del elemento canvas).

Lo que se ve es que las cajas son exactamente compensado por la mitad pero el círculo (que sólo dibujó un círculo semi de lo contrario no habría sido perceptible) se superponen perfectamente. Esto es b/c en HTML Canvas, las coordenadas del círculo (x,y) se refieren al origen y no a la esquina superior izquierda. No me molesté con el triángulo b/c mi trigonometría está un poco oxidada. Personalmente creo que es engañoso usar los términos top y left, cuando x y y hubieran sido más representativos y más cortos.

Answer 2

Sí, esto es muy inesperado y aún más indocumentado.

Solución:

Conjunto

originX: "left" 
originY: "top" 

para cada objeto creado.

edit: o use la solución kangax más simple en el comentario a continuación.

Answer 3

Quiero comentar, pero carezco de la reputación para hacerlo. Así que de todos modos, aquí es lo que sucede cuando lo haga lo siguiente:

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

La forma se rindió bien, pero cuando lo selecciono para cambiar el tamaño o en movimiento, se pone a compensar a una ubicación diferente. El mejor enfoque parece ser establecer las coordenadas para cada objeto por separado utilizando el método set().