Javascript "Puzzle" mit unregelmäßigen .png Formen

Question

Soooo, was ich versuche zu tun ist im Wesentlichen ein Puzzle. Auf der linken Seite befindet sich ein Bereich mit einem Stapel von etwa einem Dutzend überlappender .png-Dateien von "gerippten" Papierstücken (alle verschiedenen unregelmäßigen Formen mit Alpha), die zusammen in der richtigen Reihenfolge ein Blatt Papier bilden mit Notizen darauf. Eine visuelle (ignorieren gedrehte Stücke):

Nichts neues ich weiß, aber meine zwei Hauptvorbehalte bei der Entwicklung ist, dass es in ie8 + und auf Touch-Geräten arbeiten muss. Das bedeutet also kein Blitz (wo das sehr einfach wäre) und keine Leinwand (dummes ie); was lässt mich mit js und vielleicht svg? Der Drag & Drop-Teil in js ist einfach genug, aber das Problem, das ich habe, ist, dass, wie Sie sicher wissen, der Alphakanal ignoriert wird und das unregelmäßige gerippte Stück eigentlich ein Rechteck ist. Dies macht es unbrauchbar, da es sich bei Stücken um einen Stapel handelt, dessen Teile sich überschneiden.

Ich kann granulare Treffererkennung auf dem Drop durchführen, indem ich eine Imagemap verwende und eine Variable auf Rollover setze.

Ich habe mich viel umgesehen (hier + google) und habe ein paar Ideen ausprobiert, aber ich bin nicht in der Lage, das Problem der unregelmäßigen Form zu lösen. Irgendwelche Ideen?

Danke für Ihre Zeit.

Answer 1

Ist nicht ExplorerCanvas eine Option für Sie? Ich würde denken, dass Sie damit eine Canvas-basierte Lösung erstellen können. Das wird viel besser als alles, was mit einfacher HTML-Elemente Manipulation durch Javascript getan

Answer 2

Low-Tech-Lösung

Verschachtelte Elemente mit absoluter Position

Wenn Sie bereit sind, ein wenig mehr ausgeben Zeit, es gibt einen Weg, dies ziemlich genau zu erreichen, ohne Flash, Canvas, SVG oder sogar Image Maps verwenden zu müssen. Und im Gegensatz zu einer Imagemap ermöglicht es Ihnen, verwandte Inhalte bei Bedarf in jedem Hotspot zu verschachteln (z. B. Pop-ups).

Im einfachsten Fall können Sie einen einzelnen rechteckigen Hyperlink-Hotspot für jedes Puzzleteil verwenden. Offensichtlich begrenzt dies den Bereich der Formen, die Sie unterstützen können (ohne überlappende Elemente zu stören).

Aber, wenn Sie diese Hyperlink-Tag und geben Sie eine Anzahl von span tag Kinder, und geben Sie jede eine absolute Position (relativ zum Hyperlink), und wenden Sie den entsprechenden Teil des Bildes auf den Hintergrund, dann können Sie "Konstruieren" Sie unregelmäßige Bildformen, die einen einzelnen unregelmäßigen Hotspot einnehmen, mit relativ wenig Interferenz mit überlappenden Elementen.

Tatsächlich wird das Bild (mit Transparenzbereichen) als Sprite-Datei behandelt, wobei das Hyperlink-Tag und die Child-Span-Tags jeweils einen Teil der "Sprite-Datei" belegen. Die meisten transparenten Teile des Bildes sind nicht mit dem Hyperlink-Tag oder den Span-Tags belegt.

Die meisten Formen können wahrscheinlich mit einem Hyperlink-Tag und 4 - 10 Spannen erstellt werden. Zugegeben, je unregelmäßiger die Formen sind, desto mehr Spannweiten werden sie normalerweise benötigen.

Ich habe dies schon einmal getan, um Hotspots für jeden der Zustände auf einer US-Karte zu erstellen, ohne eine Imagemap (oder Flash, Canvas, SVG) zu verwenden, und es war nicht annähernd so problematisch wie Sie denken.Es braucht nur ein bisschen Zeit, um die Details herauszufinden, wie man jede Form in die richtige Anzahl von Rechtecken aufteilt.

Der Fang

Rundungsfehler auf mobilen Geräten

Hier ist der Haken, und es ist ein doozy. Wenn eine Webseite auf mobilen Geräten skaliert wird (und eine reguläre Seite fast immer auf kleineren Geräten skaliert wird), führt dies zu einem Rundungsfehler, der dazu führt, dass die px-Platzierung des Hyperlink-Tags und der Span-Tags möglicherweise horizontal um mindestens 1 Pixel variiert und/oder vertikal. Dies ist auch der Fall, wenn Desktopbrowser skaliert werden. Es ist nur so, dass Desktop-Browser nicht oft skaliert werden.

Was würde passieren, dass Sie neigen würden, mit 1 Pixel oder so der Trennung (oder Überlappung) zwischen den verschiedenen Teilen jeder Form aufzuwickeln. In vielen Fällen wird dies sehr offensichtlich und visuell nicht akzeptabel sein. Je nach Implementierung können die Standorte um 2 oder 3 Pixel variieren. Wenn es auftritt, ist es schwierig zu lösen, und es gibt Grenzen, wie viel davon gelöst werden kann.

Zuletzt habe ich überprüft, Firefox ist der einzige Browser, der schlau genug ist, px-Werte auf skalierten Seiten zu runden, um dieses Problem zu vermeiden. Hoffentlich werden andere Browser es später besser unterstützen, da selbst einfache Seiten oft von Rundungsfehlern betroffen sind.

Die Lösung

Separate die Bilder von den Hotspots ist

der Rundungsfehler eines Problems mit Hotspots nicht viel (wo Präzision nicht wichtig ist). Wo es wirklich Probleme gibt, ist mit Bildern (wenn Sie ein Bild nicht sehen, wo es sollte).

Es kann möglich sein, das Schlimmste des Bildes zu vermeiden Rundungsfehler, indem Sie die folgenden Schritte aus:

• Haben eine Reihe von HTML-Code für die Hotspots, wie oben beschrieben, mit der Ausnahme keinen Teil anzuzeigen der Bilder in den Hotspots. Gib ihnen alle transparenten Hintergründe.
• Haben Sie einen anderen Satz von HTML-Code für die Bilder. Jeder wäre ein einzelnes rechteckiges Element, das das gesamte Bild anzeigt.
• Platzieren Sie jedes Bild an der gleichen Position wie der zugehörige Hotspot.
• Stellen Sie sicher, dass die Hotspots und die Bildergruppe dieselbe z-Index-Reihenfolge aufweisen. Alle Hotspots werden über allen Bildern angezeigt, aber innerhalb der Hotspots und in den Bildern muss die Reihenfolge konsistent sein.
• Wenn der Hotspot für ein Teil gezogen wird, aktualisieren Sie die Position des zugehörigen Bildes, um sie an der gleichen Stelle zu halten. Das Bild maskiert den Hotspot, während er gezogen wird.