Javascript「ジグソーパズル」不規則な.pngの形をしています

Question

Soooo、私がやっていることは本質的にジグソーパズルです。左側には、十数個の重なり合う.pngファイルの「裂けた」紙片（アルファのすべての異なる不規則な形）が積まれ、右側に順番に紙のシートを形成する領域があるノートを付けて視覚的に（回転部分を無視して）：

私は知っているだけでなく、これを開発する際の2つの主な注意点は、ie8 +とタッチデバイスで動作しなければならないということです。だから、これはフラッシュ（これは非常に簡単だった）とキャンバス（愚かなie）を意味しません。それはjsとおそらくsvgで私を残しますか？

jsのドラッグアンドドロップ部分は簡単ですが、私が気付いている問題は、アルファチャンネルが無視され、不規則なリッピングされた部分が実際は長方形であることです。これは、ピースが互いに重なり合っているスタックであると仮定すると、これを使用できなくします。

イメージマップを使用してロールオーバー時に変数を設定することで、ドロップで細かいヒット検出を行うことができます。

私はたくさん（ここ+ Google）を見て、いくつかのアイデアを試しましたが、私は不規則な形状選択/ドラッグの問題を解決することができません。何か案は？

お時間をいただきありがとうございます。

Answer 1

ExplorerCanvasはオプションですか？私はキャンバスベースのソリューションを作成できると思うでしょう。あなたは少し余分を費やすことをいとわないならそれは絶対位置ではJavaScript

Answer 2

ローテクソリューション

ネストされた要素

を通じてプレーンHTML要素の操作で行うものよりもはるかに良くなりますFlash、Canvas、SVG、さらにはイメージマップを使わなくても、これをかなり近づけることができます。また、イメージマップとは異なり、必要に応じて各ホットスポット内の関連コンテンツを入れ子にすることができます（ポップアップなど）。

最も単純なケースでは、パズルの各部分に単一の長方形のハイパーリンクホットスポットを使用できます。明らかに、サポートできるシェイプの範囲が大幅に制限されています（オーバーラップする要素に干渉することなく）。

しかし、そのハイパーリンクタグを取得し、それに複数のスパンタグの子を与え、それぞれにハイパーリンクを基準とした絶対位置を与え、画像の適切な部分をバックグラウンドに適用すると、単一の不規則なホットスポットを占める不規則な画像形状を「構築」し、重なり合う要素との干渉は比較的少ない。

実際には、画像（透過領域を含む）はハイパーリンクタグと子スプラットタグのそれぞれが「スプライトファイル」の1つの部分を占めるスプライトファイルとして扱われます。画像の透明部分のほとんどは、ハイパーリンクタグまたはスパンタグによって占有されません。

ほとんどの図形は、ハイパーリンクタグと4〜10スパンを使用して構築できます。確かに、形状が不規則であるほど、必要なスパンが多くなります。

イメージマップ（またはFlash、Canvas、SVG）を使わずに、米国地図上の各州のホットスポットを作成する前にこれを行っていましたが、それほど問題はありませんでした思う。各形状を適切な数の矩形に分割する方法の詳細を理解するにはちょっと時間がかかります。モバイルデバイス

上でエラーを丸め

キャッチ

はここでキャッチだし、それはdoozyです。 Webページがモバイルデバイス上で拡大縮小され（通常のページはほとんどの場合、より小さいデバイスで拡大/縮小されます）、ハイパーリンクタグとスパンタグのpx配置が少なくとも水平方向に少なくとも1ピクセル変化するような丸め誤差が発生しますおよび/または垂直に配置される。これは、デスクトップブラウザが拡大縮小されている場合にも発生します。デスクトップブラウザはしばしばスケーリングされません。

どのようなことが起こるかは、各シェイプの異なる部分間に1ピクセル程度の間隔（または重なり）があるようになる傾向があります。多くの場合、それは非常に明白であり、視覚的に受け入れられない傾向があります。実装によっては、位置が2pxまたは3pxほど異なる場合があります。それが発生すると解決するのが難しく、どれだけ解決できるかには限界があります。

最後に、この問題を回避するためにスケールされたページのpx値を四捨五入することについて、Firefoxが賢明な唯一のブラウザであることを確認しました。うまくいえば、単純なページでも丸め誤差がしばしば起こるので、他のブラウザでも最終的にはそれをより良くサポートすることを望みます。

ホットスポット

丸め誤差から画像

別の溶液は、（精度が重要ではない）のホットスポットでの問題の多くはありません。それが本当に問題を引き起こすのは、画像があるところです。

次の操作を実行して、エラーを丸めた画像の最悪の事態を回避することが可能となることがあります。どの部分を表示しない以外

• は、上記と同様のホットスポットのためのHTMLコードの1セットを、持っていますホットスポット内の画像のそれらにすべて透明な背景を与えます。
• 画像の別のHTMLコードがあります。それぞれは、すべての画像を表示する単一の矩形要素です。
• 各イメージを関連するホットスポットと同じ位置に配置します。
• ホットスポットのセットとイメージのセットの両方が同じzインデックス順序を持っていることを確認してください。すべてのホットスポットはすべてのイメージの上にありますが、ホットスポット内およびイメージ内では、一貫性が必要です。
• ピースのホットスポットをドラッグすると、関連するイメージの位置を更新して、それらを同じ場所に保持します。実際には、イメージはドラッグされている間にホットスポットをシャドウします。