3

形状を他の小さな形状で塗りつぶす

HTML、CSS、およびjQueryを使用して、ランダムなサイズとランダムな数のボールで形状を動的に塗りつぶしたいと考えています。

たとえば、添付の図では、「図 A」は、ユーザーがボールを追加するときに塗りつぶしたいカスタム形状です (ボールは、コメントを入れると実際にはユーザーの写真になります)。たとえば、100 人のユーザーがコメントを投稿した場合、ランダムなサイズのボールを 100 個、色を「図 A」の形で配置したいとします。図Aは現在線を表示していますが、これらの円で塗りつぶすと、線が表示されなくなり、形状が円になります.

それを達成する方法はありますか？または、HTML、CSS、jQueryで誰かがすでにそれを行っている例はありますか?

前もって感謝します。

4

1 に答える 1

0

この問題に取り組む方法は 2 つあります。

  1. 円をマッピングします。たとえば、レイアウトをハード コードして、配置されるまで隠しておきます。cicles は基本的に、一意の ID を持つプレースホルダーです。
  2. 円が動的に作成される場合は、衝突検出が組み込まれた物理エンジンである box2dweb を使用します。ナットを割るためにスレッジ ハンマーを使用しますが、いくつかの逮捕的なアニメーションとユーザー インタラクションでプロジェクトを拡張することができます。円はドラッグ可能で、ユーザーは自分の写真を動かしたりできます。重力を自分で設定して、作成した包含形状に落下または浮き上がらせることができます。Seth Ladd は、包括的な一連のチュートリアルをオンラインで提供しています。html canvas についても十分に理解している必要があります。
于 2013-11-15T00:09:01.903 に答える