When any of the 4 corner handles of the image is dragged, the image should scale proportionally either up or down.
Problem: With my current attempt as shown in the jsfiddle linked below, when the topLeft
handles are dragged vertically, the image rescales proportionally, but the other handles flicker. When the same topLeft
handle is dragged horizontally, the image simply moves without resizing.
How can proportional scaling be implemented with KineticJS? Thank you!!!
jsfiddle: http://jsfiddle.net/zb3Km/
Going by this.....
math/algorithm Fit image to screen retain aspect ratio
I got this.....
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;
//topRight.attrs.x = activeAnchor.attrs.x + image.getWidth();
bottomLeft.attrs.x = activeAnchor.attrs.x;
// bottomRight.attrs.x = activeAnchor.attrs.x + image.getWidth();
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;
}
//https://stackoverflow.com/questions/6565703/math-algorithm-fit-image-to-screen-retain-aspect-ratio
var ws= topRight.attrs.x - topLeft.attrs.x;
var hs = bottomLeft.attrs.y - topLeft.attrs.y;
var wi = image.getWidth();
var hi = image.getHeight();
var rs = ws/hs;
var ri = wi/hi;
if (rs>ri){
var width =wi * hs/hi;
image.setSize(width, hs);
image.setPosition( topLeft.attrs.x+((ws-width)/2), bottomLeft.attrs.y-((hi)));
} else {
var height=hi * ws/wi;
image.setSize(ws, height);
image.setPosition( topRight.attrs.x-wi, topLeft.attrs.y+((hs-height)/2));
}
}
http://jsfiddle.net/zb3Km/2/
EDIT:
http://jsfiddle.net/zb3Km/3/
Made the anchors snap back after your finished resizing
EDIT2:
Now anchors the resize to the opposite corner.
http://jsfiddle.net/jdA3y/