Javascript KineticJS中的约束/比例缩放

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

问题：对于我当前的尝试，如下面链接的JSFIDLE中所示，当垂直拖动

左上方的
句柄时，图像会按比例重新缩放，但其他句柄会闪烁。当水平拖动相同的
左上
控制柄时，图像只需移动而不调整大小

如何使用KineticJS实现比例缩放？谢谢你

JSFIDLE:
通过这个

我得到了这个

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));
    }


}



编辑：



完成大小调整后，使锚回扣

编辑2：
现在将调整大小锚定到另一个角。

如果图像保持居中，效果会更好……我明天可能会为您做这件事。。。可能；）任何时候，我都很乐意帮忙……明天我会考虑保持它的中心，真的应该把它做好；）@Nyxynyx将图像居中似乎是一件麻烦事（需要解释）。因此，我将其锚定到其用于调整大小的另一个角。这提供了更多的预期行为，大多数情况下，他们不必在每次调整图像大小时重新定位图像。完美！从你身上学到了很多！这是一个很好的方法，问题是它一直从左上角的锚点缩放图像。但效果很好。再多做一点研究和调整所有锚定的大小就行了。