1

画像の4つのコーナーハンドルのいずれかをドラッグすると、画像は上下に比例して拡大縮小されます。

問題：以下にリンクされているjsfiddleに示されている現在の試みでは、topLeftハンドルを垂直方向にドラッグすると、画像は比例して再スケーリングされますが、他のハンドルがちらつきます。同じtopLeftハンドルを水平方向にドラッグすると、サイズを変更せずに画像が移動します。

KineticJSで比例スケーリングを実装するにはどうすればよいですか？ありがとうございました！！！

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

4

1 に答える 1

3

これで行く.....
数学/アルゴリズム画像を画面に合わせてアスペクト比を維持する

私はこれを得た..... 

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/

于 2012-12-15T19:28:02.480 に答える