1

http://hakim.se/experiments/html5/coil/で見ることができる塗りつぶし効果は非常に素晴らしいものです。そのような塗りつぶし (描画中に形状を閉じると、閉じた形状の塗りつぶしを作成していることがわかります) がどのように機能するかについては、何も推測できませんでした..

アイデアはありますか？

4

3 に答える 3

6

全体的な高レベルのプロセスを探しているようです。そのサイトで使用されているアプローチをリバース エンジニアリングせずに、次のように考えてみます。

マウスの現在の位置のポイントから開始します。時々、

  1. マウスの前の位置からマウスの現在の位置まで線分を描画します。
  2. 古すぎる線分を削除します。

  3. 新しい線分が既存の線分と交差する場合(Google の「線分の交差を検出」など)、それらが交差する点で分割します(「交差点でのアルゴリズム分割線分」を検索すると、そこに到達する可能性があります)。

    あなたがから始めると仮定します

       o----o
    \
     \o
      \ /
       \ /
        o

    右側のポイントからセグメントを追加し、左方向に延長します。

       o----o
    \
o---------o
      \ /
       \ /
        o

    新しいセグメントが既存の線分と交差することに注意してください。交点でそれらを分割します。

       o----o
    \
o----o-----o
      \ /
       \ /
        o

    oは線分の終わりを示すことに注意してください。4 つの線分 (うち 2 つが交差) から、6 つの線分 (そのうちの 4 つが共通点を共有) になりました。

    これらの手順により、線分の連続した軌跡が得られます。次に、それらが多角形を形成するかどうかを調べてみましょう。

  4. 各線分をエンドツーエンドでステップします。隣接していない複数のセグメント間で共有されている線分の最初の端を特定します。その終点を見つけたら、その点までのすべての線分を描きます。

       ●----●
    \
     ●

  5. 反対側から始めて、同じことを行います。

       o----o
    \
●----●

  6. 残りの線分はすべてポリゴンの一部です。次に、キャンバスに囲まれたポリゴンを描画します。

       o----o
    \
o----●-----●
      \.../
       \./
        ●

  7. 最後に、ポリゴン内に含まれる円を特定します。実際にポリゴンを形成する上記のセグメントのリストを用意して、「アルゴリズム ポイントはポリゴン内にあります」などの検索で Web をヒットします。

于 2013-01-03T00:28:26.867 に答える
1

基本的に、ポリライン (OpenGL 用語ではライン ストリップ) を描画しています。主な問題は次の 3 つです。

  • ポリラインを閉じたかどうかをテストする方法。
  • 閉じたポリラインがあると判断した場合に、そのポリラインを取得する方法。
  • 閉じたポリラインをラスタライズして塗りつぶされた形状を取得する方法。

最初の問題については、（大まかに言えば、実際には少し面倒ですが）ポリラインの描画中にヒットしたピクセルのシーケンスを保存し、描画している現在の線のビットが以前に描いたものにヒットしたときに停止できます. (ゲームでは、ラインの古いビットはしばらくすると期限切れになります。これは、ピクセルの時間値を保存し、年齢がしきい値を超えたときにそれらを削除することでモデル化できます。)

2 番目の問題については、開始点と終了点の間のピクセル シーケンスの一部を保持するだけです。

3番目の問題は、しっかりとやりたい場合はやや難しくなります（「楽しい」特別なケースがたくさんあります）-「ポリゴンラスター化」を検索して、かなりの量を読む準備をしてください。私はかつてそれを行うためのコードを書きました。それは価値があります:

https://github.com/sgolodetz/millipede/blob/master/trunk/source/common/graphics/PolylineRasterizer.cpp

実際には、これはすべて、ここで説明したよりもややこしいものになる可能性が高いことに注意してください。

于 2013-01-02T23:53:21.643 に答える