パズルゲーム:フィギュア上の非凸ポリゴンのクリッピング


7

SVGファイルにオリジナルの図があります。部分的にランダムに分割する必要があります。その例を以下に示します。
サンプル画像
ボロノイ図(フォーチュンのアルゴリズム)の分割に使用するアイデアがあります。次に、図形の交差線を変更して曲率を与えることはできますか?各形状をパスとして識別するために取得できますか?ゲームを作成するには、cocos2d-xを使用します。

回答:


2

あなたは正しい考えを持っていると思いますが、実行は非常に困難になるでしょう。私はあなたが「SVGファイルで」と言うとき、あなたは形が1つ(またはそれ以上-あなたのサンプル図には内部の穴があります!)のストロークパスによって定義されていることを意味すると思います。残念ながら、SVGパスは2次と3次の両方のベジェ曲線と楕円弧セグメントで、非常に複雑になる可能性があります。これらのいずれかと線の交差は解決された問題ですが、非常に重要な問題であり、交差点でそれらを2つに分割するためにベジエ曲線を再パラメーター化することでさえ少しトリッキーです—基本的には、あなたが探しているのは、フォーラムの投稿ではなく、小さな本で答えるほど複雑です!そうは言っても、そこにはいくつかの優れたリファレンスがあります。ショートショート答えのバージョンは、ベジエ曲線のいわゆる「変動減少」プロパティ(基本的に、ベジエ曲線がその制御点の凸包内に含まれるプロパティ)とともに再帰的なサブディビジョンを使用して絞り込みたいというものです交差点の考えられる位置(ラインには複数の交差点が存在する可能性があることに注意してください。これは、考慮しなければならない可能性があるもう1つの特殊なケースです)。そして、交差点の問題を解決しても、まだ長い道のりがあります。曲線と線分を追跡し、それらを適切に分割するためには、膨大な簿記が必要になります。これはあなたを全く落胆させることではありません。あなたがやろうとしていることの大きさに注意してください!

幸いなことに、あなたの他の質問—「図形の交差線を変更して曲率を与えることはできますか?」—答えは簡単です。あなたはすでにSVGランドにいるので、ここでもベジェ曲線を使用します。最初に、「カーブアウト」するラインセグメントに沿って5つのポイントp1..p5を選択します。 ; 次に、それらをラインから少しランダムな距離に移動し、2つの別々のベジェ曲線の制御点として使用します。1つは点p0、p1、p2、p3を使用し、もう1つは点p3、p4、p5、およびp6(ここでp0ここでp6は、元の線分の2つの端点です)。ここでもベジエ曲線の凸包プロパティを利用して、変位した点が 変位が大きすぎるため、カーブの両側にある2つの領域は単純な領域のままです。これは、あなたが望んでいる一種の湾曲した境界を与えるはずです。


答えてくれてありがとう。SVG画像とその動作はXMLテキストファイルで定義されているため、SVGファイルを使用することにしました。おそらく、図の内部情報を使用して図を壊すことができます。これが最善の解決策ではないのではないかと思いますが、この分野の知識は初めてです。SVGファイルを別のものに置き換えると、ソリューションが簡単になると思いますか?側面に曲線がある非凸形状を分割する他の方法を知っているでしょうか?
クレイジーD0G

SVGはフォーマットとしては問題ないと思います。ご存知のように、SVGは簡単に解析できる明確に定義されたテキストフォーマットです。SVGは問題を難しくするものではありません-それは、スプラインなどを扱う際の核となる問題です。しかし、他の形式では、例のような数字を十分に簡潔に表現できないと思います。それは本質的に挑戦的な問題です。
Steven Stadnicki、

...とはいえ、乗り越えられないわけではありません。それは比較的簡単でもあります(ただし、心配する必要のある細部はたくさんあります)。優れたベジェライブラリを構築(または検索)するだけです。提起されなかった唯一の問題は、少しトリッキーかもしれませんが、Vornoiダイアグラムを作成するためにFigure内のポイントを選択する方法です。
Steven Stadnicki

ポイントの配置はランダムに行うことができるので、それらは図の領域に該当するか、複数の線を指定してさらにそれらにランダムなポイントをとります。
クレイジーD0G 2012年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.