7

異なる色の領域をパスに変換することにより、ラスターグラフィックからSVGファイルに変換したマップがあります。

エッジの配列を指定して基本的なポリゴンのポイントチェックを行う方法は知っていますが、svg:path要素は複数のポリゴンとマスク(海などを考慮)を表し、d属性を解析してその情報を抽出するのはかなり手間がかかるようです。

そのチェックを簡素化できるJSライブラリはありますか?基本的に、ランダムなポイントを作成して、それらが陸(つまりポリゴンの内側)にあるのか水(つまり外側)にあるのかを確認したいと思います。

SVG要素はマウスイベントの処理を可能にするように見えるので、これはそれほど問題にはならないはずです(つまり、マウスポインターが要素の上にあるかどうかがわかれば、すでにポイントインを解決しています。ポリゴンの問題)。

編集:問題を少し複雑にしますが、svg:path要素は線ではなく曲線に基づいているように見えるので、d属性を解析してエッジの配列を作成することはオプションではないようです。

要素は属性を取ることができるのでfill、キャンバス上にSVGをレンダリングし、特定のポイントでピクセルのカラー値を見つけるというゲットーのアプローチは機能する可能性がありますが、それは本当に、本当にひどい方法のようです。

4

2 に答える 2

4

ヒットテストのSVG形状に関する答えは?この探求であなたを助けるかもしれません。ブラウザのサポートがないという問題がありますが、svgroot.checkIntersectionを使用して、ポリゴン形状内の小さな(おそらく幅/高さが0でも機能する)長方形をヒットテストすることができます。

于 2011-12-02T20:00:25.823 に答える
1

最後の手段として私が提案したアプローチは、この問題の最も簡単な解決策のようです。

キャンバス上でSVGを簡単にレンダリングできる素晴らしいJSライブラリを見つけました。getImageDataSVGがレンダリングされると、必要なのは、チェックしたいポイントで1x1領域の2Dコンテキストのメソッドを呼び出すことだけです。SVGが私が使用しているものよりも複雑な場合は、色分けしてSVGのコピーを作成すると、チェックが簡単になると思います(RGBA値をバイトごとにチェックする必要があります)。

ラスターイメージのピクセルを実際に検査しているので、これはひどくハックな感じがしますが、パフォーマンスは十分にまともなようで、カラーチェックは不純物を許容する方法で書くことができます(たとえば、エッジの近く)。

相対座標が必要な場合は、1対1のサイズのキャンバスを作成してから、ピクセル座標をキャンバスの寸法で割ってみてください。

誰かがより良い答えを思いついたら、代わりにそれを受け入れます。それまでは、これは、誰かが簡単な解決策を探して同じ問題を抱えてここに来た場合のプレースホルダーとして機能します。

于 2010-11-14T02:47:01.447 に答える