2

How to restrict movement of image object within canvas boundaries with "lockUniScaling" true

Naveen Sambhoju
  • 25
  • 6
  • possible duplicate of [Move object within canvas boundary limit](http://stackoverflow.com/questions/22910496/move-object-within-canvas-boundary-limit) – Swapnil Jain Apr 06 '15 at 12:55
  • This does not maintain aspect ratio of image object, I'm looking for "restrict movement" and also "maintain initial aspect ratio of the image" while scaling – Naveen Sambhoju Apr 06 '15 at 13:19
  • It does, unless i am missing something. Here's the jsfiddle: https://jsfiddle.net/1ghvjxbk/2/ – Swapnil Jain Apr 06 '15 at 15:12
  • It does while "moving" but not on "scaling". my requirement is, when we scale the image, it should be within canvas and also maintain aspect ratio of the image. – Naveen Sambhoju Apr 06 '15 at 15:35
  • 1
    Try this: https://jsfiddle.net/hq7gc0kd/ Now even while scaling, image is kept within the canvas and aspect ration is maintained. – Swapnil Jain Apr 06 '15 at 17:25
  • Thanks Jain, you almost got it, it would be great if we stop scaling on hitting any corners of the canvas, presently u are allowing scaling upto maximum size of the canvas(maxWidth , maxHeight). For example if I'm scaling with top-right control, upon hitting right end of the canvas, we should stop scaling and also position of the image object should not change, with present implementation image object fills the canvas upto maxWidth , maxHeight. Hope you got my requirement. – Naveen Sambhoju Apr 07 '15 at 15:33
  • For this, you can modify the code to check if the bounding box is going out of canvas area just like we do in the case of moving object. Also keep previous scaleX or scaleY value in a variable lets say prevScale. In case bounding box is going out of the canvas, set the scale to prevScale. – Swapnil Jain Apr 07 '15 at 16:35
  • Thanks Jain, for your time and effort. You made my day :) – Naveen Sambhoju Apr 09 '15 at 14:30
  • @NaveenSambhoju Can you post answer here. So that it can be helpful to others. – Parixit Dec 23 '15 at 11:25

0 Answers0