BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] アスペクト比を計算するためのアルゴリズムとは？

2023-02-01 11:29:58

質問

JavaScriptで画像をウィンドウ全体に収まるように切り抜くのに使う予定です。

編集 : のような形式のアスペクト比しか受け付けないサードパーティ製コンポーネントを使うことにします。 4:3 , 16:9 .

~12歳編集：この手の質問は割と面白いですねー。ここに何かあるのでしょうか？ 絶対に!

どのように解決するのですか？

使用可能なアスペクト比をお探しなのでしょうか？ integer:integer のような解決策を求めているようです。 16:9 よりも、むしろ float:1 のような解決策ではなく 1.77778:1 .

もしそうなら、必要なことは最大公約数(GCD)を見つけて、それで両方の値を割ることです。GCDは、両方の数を均等に割る最も大きい数です。つまり、6と10のGCDは2であり、44と99のGCDは11です。

たとえば、1024x768のモニタのGCDは256です。両方の値をその値で割ると、4x3 または 4:3 になります。

(再帰的な) GCD アルゴリズム。 

function gcd (a,b):
    if b == 0:
        return a
    return gcd (b, a mod b)

C言語では 

static int gcd (int a, int b) {
    return (b == 0) ? a : gcd (b, a%b);
}

int main(void) {
    printf ("gcd(1024,768) = %d\n",gcd(1024,768));
}

そして、画面サイズを検出し、そこからアスペクト比を計算する1つの方法を示す完全なHTML/Javascriptがここにあります。これは FF3 で動作しますが、他のブラウザがどのように screen.width と screen.height . 

<html><body>
    <script type="text/javascript">
        function gcd (a, b) {
            return (b == 0) ? a : gcd (b, a%b);
        }
        var w = screen.width;
        var h = screen.height;
        var r = gcd (w, h);
        document.write ("<pre>");
        document.write ("Dimensions = ", w, " x ", h, "<br>");
        document.write ("Gcd        = ", r, "<br>");
        document.write ("Aspect     = ", w/r, ":", h/r);
        document.write ("</pre>");
    </script>
</body></html>

出力されます（私の変なワイド画面モニターで）。 

Dimensions = 1680 x 1050
Gcd        = 210
Aspect     = 8:5

その他、私がテストしたもの。 

Dimensions = 1280 x 1024
Gcd        = 256
Aspect     = 5:4

Dimensions = 1152 x 960
Gcd        = 192
Aspect     = 6:5

Dimensions = 1280 x 960
Gcd        = 320
Aspect     = 4:3

Dimensions = 1920 x 1080
Gcd        = 120
Aspect     = 16:9

最後の1台が家にあればいいのですが、いや、残念ながら仕事用のマシンです。

アスペクト比がグラフィック リサイズ ツールでサポートされていないことがわかった場合にどうするかは、別の問題です。最善の策は、レターボックスの線 (ワイド画面の映画を見るときに、古いテレビの上部と下部に表示されるようなもの) を追加することだと思います。私は、画像が要件を満たすまで、上部/下部または側面 (レターボックス ラインの数が最も少なくなる方) にそれらを追加します。

16:9 から 5:4 に変更された画像の品質を考慮する必要があるかもしれません。レターボックスが導入される前に、若い頃にテレビで見た信じられないほど背が高く、細いカウボーイのことを今でも覚えています。アスペクト比ごとに 1 つの異なる画像を用意し、実際の画面の寸法に合わせて正しい画像をリサイズしてから送信したほうがよいかもしれません。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します