I am trying to implement the panning of the image while the image moves after double click on the image. It’s working fine for the non-rotated images. It’s not working for the rotated images. Here is the link to my code jsfiddle
canvas.observe('object:moving', function(e) {
var movingBox = e.target;
movingBox.setCoords();
var top = movingBox.oCoords.tl.y;
var bottom = top + movingBox.height;
var left = movingBox.oCoords.tl.x;
var right = left + movingBox.width;
var boundingBox = picArea;
boundingBox.setCoords();
var topBound = boundingBox.oCoords.tl.y;
var bottomBound = topBound + boundingBox.height;
var leftBound = boundingBox.oCoords.tl.x;
var rightBound = leftBound + boundingBox.width;
movingBox.left = (Math.max(Math.min(left, leftBound), rightBound - movingBox.width));
movingBox.top = (Math.max(Math.min(top, topBound), bottomBound - movingBox.height));
}
);