Constrained/Proportional Scaling in KineticJS

Question

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/

score 3 · Accepted Answer · edited May 23 '17 at 12:06

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/

Better would be if the image stayed centered....I _might_ look at doing that tomorrow for you... _might_ ;) — PAEz, Dec 15 '12 at 19:56
Any time, glad to help....and I prolly will look at keeping it centred tomorrow, really should get it right ;) — PAEz, Dec 15 '12 at 20:31
@Nyxynyx Centering the image seemed like it would be a hassle (to long to explain). So I made it anchor to the opposite corner to the one their using to resize. This gives more expected behaviour and most times they shouldn't have to reposition the image every time they resize. — PAEz, Dec 16 '12 at 09:42
this is a nice aproach, the problem is that it scales the image from the topLeft anchor all the time. But it works good. A little bit more research and resizing from all the anchors would work. — Ervin, Jan 07 '14 at 11:54
@PAEz please help me to solve the issue https://stackoverflow.com/questions/61237506/proportion-using-kinetic-js-canvas-left-side-anchor-not-working — M.Idrish, Apr 15 '20 at 20:06
i run your jsfiddle code but it doesnot work anchor move freely in your code — M.Idrish, Apr 15 '20 at 20:07

Constrained/Proportional Scaling in KineticJS

1 Answers1

Linked