KineticJS 中的约束/比例缩放答案

【问题标题】：Constrained/Proportional Scaling in KineticJSKineticJS 中的约束/比例缩放
【发布时间】：2012-12-03 08:33:54
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript jquery html canvas kineticjs

【解决方案1】：

按此进行.....
math/algorithm Fit image to screen retain aspect ratio

我明白了......

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/
在完成调整大小后使锚点回弹

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

【讨论】：

如果图像保持居中会更好....我可能明天会为你这样做...可能;)
任何时候，很高兴为您提供帮助....明天我会考虑保持居中，真的应该做对了;)
@Nyxynyx 将图像居中似乎很麻烦（解释时间很长）。所以我把它固定在他们用来调整大小的那个角落的对面。这提供了更多预期的行为，并且大多数时候他们不应该在每次调整大小时都重新定位图像。
完美！向你学习了很多！
这是一个不错的方法，问题是它总是从左上角锚点缩放图像。但效果很好。对所有锚点进行更多研究和调整大小会起作用。