javascript - KineticJS 中的约束/比例缩放

Question

当拖动图像的 4 个角手柄中的任何一个时，图像应按比例向上或向下缩放。

问题：使用下面链接的 jsfiddle 中所示的当前尝试，当topLeft垂直拖动手柄时，图像会按比例重新缩放，但其他手柄会闪烁。当topLeft水平拖动相同的手柄时，图像只是移动而不调整大小。

KineticJS 如何实现比例缩放？谢谢！！！

jsfiddle：http: //jsfiddle.net/zb3Km/

Answer 1

通过这个......
数学/算法适合图像到屏幕保留纵横比

我懂了.....

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/
编辑： http:
//jsfiddle.net/zb3Km/3/
在完成调整大小后使锚点恢复原状

EDIT2：现在将调整大小锚定到对角。
http://jsfiddle.net/jdA3y/