0

寸法 w と h のドキュメントがあります。内部には、座標 x および y に配置された寸法 w1 および h1 の長方形があります。

使用したドキュメントで長方形が常に中央に配置されるように x と y を計算するには、次のようにします。

x = (w / 2) - (w1 / 2)
y = (h / 2) - (h1 / 2)

そしてそれは動作します！

しかし、常に w と h に比例するように w1 と h1 を動的に変更したいと思います。たとえば、ドキュメントが四角形よりも小さくなる場合、四角形は縮小されてもその比率を維持する必要があります。

では、どうすれば w1 と h1 を計算できますか?

「ドキュメント」は html5 キャンバスで、長方形は画像です。私はjavascriptで働いています。

ありがとう！

ここに JS Fiddle があります: http://jsfiddle.net/Saturnix/TkPX5/1/ ウィンドウをスケーリングしてみてください: 四角形は常に中央にとどまります。ただし、ウィンドウが小さくなると、サイズは変更されません。w1 と h1 を計算する式がありません。

4

1 に答える 1

1

私はあなたが望むものを達成し、コメントで提供したjsfiddleに基づいている次のコードを書きました:

var w1 = 300;
var h1 = 400;
var WPROP = w1/g.width;
var PROP = h1/w1;
g.draw = function() {       
    // DOCUMENT WIDTH AND HEIGHT
    var w = g.width;
    var h = g.height;            

    w1 = WPROP*w;
    h1 = PROP*w1;

    // RECTANGLE
    var x =  (w / 2) - (w1 / 2);
    var y = (h / 2) - (h1 / 2);

    g.ctx.fillRect(x,y,w1,h1);

}

作業中のこのコードについては、こちらを参照してください。

于 2012-10-02T14:09:43.653 に答える