ashish-y/Kinetic.plugin.resizable

An Image resize Plugin for KineticJS Canvas framework

Project : KineticJs Resize plugin

Description: A small Plugin I made for KineticJS to make resizing easy

Installation:
1.Download kinetic.plugin.resize.js 
2.Include kinetic.plugin.resize.js after kinetic.js in HTML

Usage

	var yodaImg; // name of the image
    	//define the width height of the Image
   	var width=93;
   	var height=104;

    	var KineticPlugins; /
    	//Make a stage 
    	var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 500
        });
   
	var layer = new Kinetic.Layer();
    	var imageObj = new Image();
    	// on image load
   	imageObj.onload = function() {
     		yodaImg = new Kinetic.Image({
          	x: 0, 
          	y: 0,
          	image: imageObj,
          	width: width,   //pass the width 
          	height: height,  //pass the height
          	name: "image"
        	});

     		//Plugin resize the image - 
      		KineticPlugins = new Kinetic.Plugins.Resizable({
      			image : yodaImg,  // Image Name
      			layer : layer,    // Layer Name
      			stage : stage     //Stage Name
    		});
      		//Initialize the Plugin (pass width and height of the image)
    		KineticPlugins.reSize(width, height );
  	};
    	imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'; // Image object


To maintain the aspect ratio of the image
  -- replace 
        var width = topRight.getX() - topLeft.getX();
       	var height = bottomLeft.getY() - topLeft.getY();
        	if(width && height) {
          	image.setSize(width, height);
        }
  ...by
        var height = bottomLeft.attrs.y - topLeft.attrs.y;
	var width = image.getWidth()*height/image.getHeight();
	topRight.attrs.x = topLeft.attrs.x + width;
	topRight.attrs.y = topLeft.attrs.y;
	bottomRight.attrs.x = topLeft.attrs.x + width;
	bottomRight.attrs.y = topLeft.attrs.y + height;
	if(width && height) {
		image.setSize(width, height);
	}
	--
	
For Multiple Image.
	define the image again and also pass valid options
	and initialize the plugin again .