Hay un error en Fancy Product Designer. El lienzo fabric.js tiene una función para agregar una zona de carga de fotos (también conocida comoboundingBox). El usuario puede hacer clic en él e insertar una imagen. Si esto no te queda claro, revisa las imágenes adjuntas Antes Después .

Como puede ver en la imagen After , todo funciona bien cuando la zona de carga no se ha rotado. Una vez que la gira, la imagen se coloca en una posición extraña, y no estoy seguro de por qué. El código está debajo.

Puede configurar la imagen cargada para que se ajuste o cubra el área de la zona de carga. Los míos están configurados para encajar, pero ninguna de las dos opciones funciona.

 var objects = instance.stage.getObjects(); for(var i=0; i < objects.length; ++i) { //get all layers from first view var object = objects[i]; if(element.boundingBox == object.title) { var topLeftPoint = object.getPointByOrigin('left', 'top'); return { left: topLeftPoint.x, top: topLeftPoint.y, width: object.width * object.scaleX, height: object.height * object.scaleY, angle: object.angle || 0 }; break; } }

Editar: incluso si alguien puede explicar qué está sucediendo específicamente y por qué está llegando a la posición en la que se encuentra, eso sería útil.