KineticJS中的约束/比例缩放 [英] Constrained/Proportional Scaling in KineticJS

问题描述

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

When any of the 4 corner handles of the image is dragged, the image should scale proportionally either up or down.

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

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.

如何实现比例缩放与KineticJS？谢谢!!!

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

我有这个.....

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

    //http://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/

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

http://jsfiddle.net/zb3Km/3/
Made the anchors snap back after your finished resizing

EDIT2：
现在将锚点调整到相对的角落。

http://jsfiddle.net/jdA3y/

这篇关于KineticJS中的约束/比例缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！