There is a bug in Fancy Product Designer. The fabric.js canvas has a feature to add a photo upload zone (aka boundingBox). The user can click it and insert an image. If this is not clear, check the images attached Before After.
As you can see in image After, all works fine when the upload zone has not been rotated. Once you rotate it, the image gets placed in an odd position, and I am not sure why. The code is below.
You can either set the uploaded image to Fit or Cover the upload zone area. Mine are set to fit, but neither option works.
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;
}
}
Edit: Even if someone can explain what is going on specifically and why it is making it to the position it is in, that would be helpful.