14

ある「形状」を別の「形状」に変形させるアルゴリズムに取り組もうとしています。両方の形状は任意であり、さらに小さくばらばらな形状を持つことさえあります。

これまでの基本的な考え方は次のとおりです。形状のエッジを見つけ、それらのエッジに沿ってポイントを配置し、ターゲット イメージで同じことを行い、ポイントをターゲットに移動します。

以下に図を示します。

モーフ

どこから始めたらいいのかわからない。上の画像は簡略化したもので、実際の使用例はより複雑な形状/輪郭を持っています。私の主な問題は、ばらばらの形状をどのように処理するかです。私が思いつく最善の方法は、2 つのピースの間の最も近いポイントを見つけ出し、それらをパスの一部として結合することです。しかし、これをどのように実装しますか？

私はまだコードを持っていません。これについてはまだ計画段階です。私が求めているのは、誰かが私を助けてくれるリソースにリンクしたり、ポインタを提供したりできるかどうかということだと思います. Google を検索すると、いくつかの興味深いモーフ アルゴリズムが得られましたが、それらはすべて完全な画像を処理し、画像を細かく分割して形状を変更する必要があります。これは私が探しているものではありません。

これは JavaScript で使用されることに注意してください。

4

4 に答える 4

5

JavaScript でのアウトライン モーフィングとモーショントゥイーンのデモンストレーション (Raphael.js を使用) を見つけました。Raphael.jsを使用して、ある曲線を別の曲線にモーフィングする方法を示しています。

また、この関連する質問(JavaScript での形状のトゥイーンについて) には、この質問に関連する回答が含まれている場合があります。

MorpherJS ライブラリも、この目的に適している場合があります。MorpherJS を使用したアウトライン モーフィングのデモは、こちらでご覧いただけます。

于 2013-03-25T19:58:42.100 に答える
5

問題を個別に解決できる複数の小さな問題に分割することをお勧めします。そうすれば、この問題を解決した後に独立した機能を所有することもでき、これをグローバル モジュール コレクションに追加することができます。

最初に、from_shape のどのピクセルが to_shape のどのピクセルに移動するかを把握する必要があります。
次の方法でそれを理解できます。

  1. from_shape の上に to_shape を配置します。

  2. from_shape のすべてのピクセルについて、最も近い to_shape ピクセルを見つけます。
    シェイプ内のすべてのピクセルには一意の ID が必要です。その ID は、たとえば、その xy 位置にすることができます。

  3. これで、一意の各ピクセルを from_shape に記録し、どの一意のピクセルに移動するかを to_shape に記録できるようになりました。

  4. オーバーラップしたシェイプを削除して元のシェイプに
    戻ります。これで、from_shape の各ピクセルが to_shape の宛先がわかります。

また、各ピクセルがどの「兄弟」を持っているかを知る必要があります。
兄弟は、別のピクセルのすぐ隣にあるピクセルです。
それを見つけるには、特定のピクセルに移動し、そこから半径 1 のすべてのピクセルを収集します。それらはすべて黒です..元ピクセルの兄弟です。この情報は、ピクセルが目的地に移動するときに形状を 1 つの単位として維持するために必要です。兄弟をスキップすると、モーフが大幅に高速化され、簡素化されますが、兄弟がないと、モーフ中に形状が断片化する可能性があります。兄弟のいないバージョンから始めたいと思うかもしれません。

最後に、モーフを実装します。

  1. morph_time_duration があります。
    from_shape の各ピクセルについて、to_shape の目的地までの距離を見つけます。
    その距離を morph_time_duration で割った値が、モーフ中のピクセルの速度です。
    また、目的地への角度は、移動する角度です。
    これで、速度と角度が得られました。

  2. したがって、モーフィング手順の各フレームで、指定された from_pixel は、移動する方向、速度、およびその兄弟も認識します。したがって、各フレームで、その方向にその速度で移動した後、ピクセルを新しい位置に描画するだけです。そして、そのすべてのピクセル兄弟に線を引きます。

そして、それはあなたのモーフを表示します。

于 2013-03-29T06:10:56.000 に答える
2

それを行うのは非常に簡単ではありませんが、いくつかの開始点を示すことができます。単純な JavaScript の実装が必要な場合は、http: //raphaeljs.com/animation.htmlから始めるとよい でしょう。そのため、どのメソッドが呼び出されているかを確認し、それらのメソッドのライブラリ ソースを参照して実装を確認できます。

PHP で 2 つの画像をモーフィングする必要がある場合は、何らかの拡張機能を使用し、通常の PHP ではそれを行わないことをお勧めします。ImageMagick を使用した例を次に示します: http://www.fmwconcepts.com/imagemagick/shapemorph2/index.php

その内部について詳しく知りたい場合: http://web.mit.edu/manoli/www/ecimorph/ecimorph.html#algo

それらの1つが役立つことを願っています。

于 2013-03-25T04:40:22.747 に答える
1

簡単に言えば、自分でロールバックしようとしている場合、それは簡単な作業ではありません。これらのトピックには、これらの非常に変換を実行する数学がたくさんあります (最も一般的な形状を扱うのが最も一般的です) が、アクセスできる場合とできない場合があり、それほど簡単ではありません。非標準の変換を行う方法を理解する。

論理的なアプローチを探しているだけの場合は、ここから始めます (何年も計算を行っておらず、リンクされているグラフィック ライブラリの内部動作を研究していません)。

  1. 意味のある単位、おそらくピクセルで測定された距離を選択します。

  2. 各形状の各連続エッジを識別します。各形状の 1 つのエッジ上の任意のポイント (たとえば、(0,0) が左上隅を表す平面上、(0,0) に最も近い各形状のエッジ ポイント) を選択し、その上に個別の形状を揃えます。点。変換の目的で、そのポイントは静的なままであり、他のすべてのポイントはそれに準拠します。

  3. シェイプに 2 つ以上の異なるエッジがある場合は、周囲の長さで並べ替えます。短い長さは長い長さに従属していると考えてください。手順 2 と同様のプロセスを使用して、これら 2 つのエッジを接続する任意のポイントを選択します。

  4. 選択した各ポイントで、ステップ 1 で選択した距離の間隔でエッジの周りのポイントを数えます。

  5. (読者の演習として残しておきます) 必要に応じて、エッジ上のポイントを整列、削減、または追加して、異なるエッジ上のポイントをまとめてターゲット シェイプに適合させます。

または、任意の距離の代わりに任意の数のポイントを選択し、それらが収まる距離でエッジに沿って適切に広げ、それらのポイントを合わせることもできます。

そこにいくつかのアイデアを投げかけるだけで、問題がどれほど深刻かは正直わかりません。

于 2013-03-26T19:50:24.420 に答える