2

注: これは Web ページ用ではありません。一連の画像を保持し、多数の画像をランダムに選択して画面に表示する単純なプログラムです。画像エディターを使用して、インポートした画像を手動でキャンバスに配置することを想像してみてください。

固定サイズの画面に一連の任意の画像を配置する方法を考え出すのに苦労しています (これは単なるウィンドウです)。

たとえば、画像が 1 つある場合は、おそらく画面の中央に配置します。

          | |

2 つの画像がある場合、それらを画面の中央に配置しようとしますが、それらを水平方向に広げて、互いに対して、また画面に対しても中央に見えるようにします。

     | | | |

しかし、1 つの画像が他の 2 つよりも大きい場合はどうなるでしょうか。私は次のようなものを持っているかもしれません

    |-----|

  | | | |

同様に、多分私は2つの大きいものと2つの小さいものを持っています

|-----| |-----|

  | | | |

大きなものは「後ろ」に表示され、小さなものは前に表示されます。

一部の画像が他の画像の一部を覆ってしまうことは避けられませんが、私にできる最善のことは、できるだけ整然としたものにすることです.

描画される各画像オブジェクトのサイズをすばやく取得できます。また、描画される画像の数には制限があります (1 から 8 まで)。

画像は画面のどこにでも描画でき、画像の一部が画面の外にある場合、それらの部分は切り取られます。すべての画像の寸法は画面の寸法よりも小さく、通常は画面全体の 1/4 以下です。

この問題にアプローチする良い方法は何ですか? 2 つの画像 (サイズが異なる可能性がある) を持つような基本的なケースを処理することでさえ、すでにかなり混乱しています。

4

2 に答える 2

1

これを2D ビン パッキング問題として扱うことができます。これにより、「コンパクト」な方法でオーバーラップしない四角形が最適化されますが、美学は考慮されません。

独自のロールを作成する場合は、キャンバス上のすべての画像をグリッド上に配置してみてください。中心から中心までの間隔は、画像が重ならないように十分大きくします。次に、画像を左から右、上から下に近づけて「押しつぶし」、空白の量を減らします。

于 2012-04-25T20:38:44.833 に答える
0

幅と高さが 100% の html テーブル (オーバーフローが無効になっている) は、IMO の出発点として適しています。

  1. <tr><td><img></td></tr>
  2. <tr><td><img></td><td><img></td></tr>
  3. 2 行、最初は colspan=2
  4. ...

次に、いくつかの醜いケースを見つけて、それらに特別なルールを作成します (3 つの垂直画像の場合は 1 行にするなど)。

于 2012-04-25T19:52:41.607 に答える