0

ユーザーがdivを移動したりサイズを変更したりできる小さなスクリプトを書いています。アスペクト比を維持する必要があり、ロジックが機能しません。

function resizing() {
    var currentHeight = elmnt.offsetHeight;
    var currentWidth  = elmnt.offsetWidth;
    var newHeight     = currentHeight + (event.pageY - currentY);
    var newWidth      = currentWidth  + (event.pageX - currentX);
    var ratio         = currentWidth  / currentHeight;

    if(ratio < 1) {
        newwidth = parseInt(newHeight * ratio);
    }
    else {
        newheight = parseInt(newWidth / ratio);
    }

    elmnt.style.height = newHeight + "px";
    elmnt.style.width  = newWidth  + "px";

    currentY = event.pageY;
    currentX = event.pageX;
}

スクリプトのような作品。ただし、残念ながら、アスペクト比が完全に正しく保たれるわけではありません。時々、horizo​​ntylだけのサイズを変更すると、古い高さは同じままで、機能することもありますが、1つの長さが少しオフセットしてサイズ変更されます。

上下左右にサイズを変更すると、長さがどんどん等しくなり、適切な正方形であれば、すべてが正しくなります。

問題を解決するにはどうすればよいですか？私の誤謬はどこにありますか？

4

4 に答える 4

1

あなたの比率は間違っていると思います。

これは、古い幅を新しい幅、または古い高さ/新しい高さで割って計算する必要があります。

例えば

var ratio = newWidth / currentWidth;
newHeight = currentHeight * ratio;

変化しているのが高さであるかどうかについてそれを変えてください。

于 2013-01-30T19:10:43.417 に答える
1

私はそれを燃やすことができました。

どうもありがとうございます！

私の問題は、私が最初に、どの軸がより多くの変化を持っているかを追跡しなければならなかったことでした。私が認識していなかった2番目の問題は、丸めの問題で大きな問題が発生したことです。

jQueryを使用してcssサイズを設定すると、丸められます。そして、私はすべてのイベントの比率計算の高さを取りました。

これは、不正確さがますます悪化していることを意味します。今、私はこれを考慮に入れて、これを非常にうまく機能させる方法を考え出しました。

これを直接onclickで実行し、要素から取得する代わりに更新するだけです。

currentHeight = $("#dragger").height();
currentWidth = $("#dragger").width();

だから、あなたの助けにもう一度感謝します！これが私の最終結果です：http： //jsfiddle.net/julian_weinert/xUAZ5/30/

于 2013-01-31T17:40:12.400 に答える
0

if（ratio <1）ブロックを次のように置き換えます。offsetxとoffsetyは、（event.pageX-currentX）と（event.pageY-currentY）に関連しています。

if (Math.abs(offsetx) > Math.abs(offsety)) {
    ratio = currentHeight/currentWidth;
    newHeight = currentHeight + (offsetx * ratio);
    newWidth = currentWidth + offsetx;        
} else {
    ratio = currentWidth/currentHeight;
    newHeight = currentHeight + offsety;
    newWidth = currentWidth + (offsety * ratio);  
}

これが実際の全体の簡単なjsfiddleです：http：//jsfiddle.net/8TWRV/

于 2013-01-31T01:02:22.450 に答える
0

これを行う必要があります。最小スケール（比率）を取得します。以下のコードは私のPHPスクリプトの一部ですが、JSに簡単に変換できます。$iSrc=ソースであり、$iDest宛先のMAX幅/高さです。

あなたの問題はあなたが正しい比率を得られないということです。比率を定義する最初の行は、問題が解決される場所です。幅または高さの比率が最も低くなります。あなたはただ幅/高さをし、高さ/幅を忘れます。そのため、垂直スケーリングは正しくありません。

$scale = min($iDestWidth/$iSrcWidth, $iDestHeight/$iSrcHeight);

    if($scale >= 1){
        $iDestHeight = $iSrcHeight;
        $iDestWidth = $iSrcWidth;
    }else{          
        $iDestWidth = floor($scale*$iSrcWidth);
        $iDestHeight = floor($scale*$iSrcHeight);
    }
于 2013-01-30T19:11:59.030 に答える