Bounds on image resize in HTML5 Canvas

Question

I am trying to add size limits on image resize using KineticJS library. HTML5 Canvas Tutorial provides the method to resize the image: http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

But I want the user not to be able to resize the image to less than 50px x 50px or greater than 200 x 200. I have tried a lot manage the controls by following code. But it shows very strange results

    dragBoundFunc: function(pos) {

        var newX = '';
        var image_width = group.get(".darthVaderImg")[0].getWidth();
        var image_height = group.get(".darthVaderImg")[0].getHeight();
        var image_position = group.get(".darthVaderImg")[0].getPosition();

                if((image_width>50 && image_width< 200)     ){
                    newX = pos.x;   
                }else{
                    newX = image_position.x+image_width+80; 
                }
                if((image_height>50 && image_height< 200)       ){
                    newY = pos.y;   
                }else{
                    newY = image_position.y+100; 
                }

                  return {
                    x: newX ,
                    y: newY,
                   };

                }

Any example or idea that how I can do it

SoluableNonagon SoluableNonagon · Accepted Answer · 2013-01-21T15:15:29

http://jsfiddle.net/e4uyG/4/ gets you pretty close to what you are asking for.

Basically, you have an update() function which redraws the images, so just limit it to a certain amount of resizing

  function update(group, activeAnchor) {
    var topLeft = group.get(".topLeft")[0];
    var topRight = group.get(".topRight")[0];
    var bottomRight = group.get(".bottomRight")[0];
    var bottomLeft = group.get(".bottomLeft")[0];
    var image = group.get(".image")[0];

    // update anchor positions
    switch (activeAnchor.getName()) {
      case "topLeft":
        topRight.attrs.y = activeAnchor.attrs.y;
        bottomLeft.attrs.x = activeAnchor.attrs.x;
        break;
      case "topRight":
        topLeft.attrs.y = activeAnchor.attrs.y;
        bottomRight.attrs.x = activeAnchor.attrs.x;
        break;
      case "bottomRight":
        bottomLeft.attrs.y = activeAnchor.attrs.y;
        topRight.attrs.x = activeAnchor.attrs.x;
        break;
      case "bottomLeft":
        bottomRight.attrs.y = activeAnchor.attrs.y;
        topLeft.attrs.x = activeAnchor.attrs.x;
        break;
    }

    image.setPosition(topLeft.attrs.x, topLeft.attrs.y);

    var width = topRight.attrs.x - topLeft.attrs.x;
    var height = bottomLeft.attrs.y - topLeft.attrs.y;
    if(height > 50 && height < 200) // Limit the height 
      image.setHeight(height);

    if(width > 50 && width < 200)  // Limit the width
      image.setWidth(width);
  }

Bounds on image resize in HTML5 Canvas

1 Answers