0

I need to prevent user to drag an image inside canvas área. I make a video to show the situation: https://youtu.be/GK5_xANTnIs

The collision is already working when angle is "% 90":

// top-left  corner
if (obj.getBoundingRect().top > 0 || obj.getBoundingRect().left > 0) {
    obj.top = Math.min(obj.top, obj.top - obj.getBoundingRect().top);
    obj.left = Math.min(obj.left, obj.left - obj.getBoundingRect().left);
}
// bot-right corner
if (obj.getBoundingRect().top + obj.getBoundingRect().height < obj.canvas.height || obj.getBoundingRect().left + obj.getBoundingRect().width < obj.canvas.width) {
    obj.top = Math.max(obj.top, obj.canvas.height - obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top);
    obj.left = Math.max(obj.left, obj.canvas.width - obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left);
}
Regis Silva
  • 59
  • 2
  • 7
  • https://stackoverflow.com/questions/5789239/calculate-largest-rectangle-in-a-rotated-rectangle –  Dec 10 '16 at 00:30
  • @K3N I Have already see this post. I Need to prevent blank spaces when dragging the image inside canvas. Fabric.js has a function getBoundingRect() that gives the outside square of image. – Regis Silva Dec 13 '16 at 16:55
  • I believe the post shows how to get the maximum interior rectangle? (the blue one in the post). Let me know if this is not what you meant and I'll remove the dup status. –  Dec 13 '16 at 18:57
  • I found the closest answer here http://stackoverflow.com/a/26607148/1038223. The key is the function isContainedWithinObject. I will try this tomorrow. – Regis Silva Dec 14 '16 at 00:07

0 Answers0