Kreis mit klickbaren Zonen erstellen

  • Hallo Forum,


    ich beschäftige mich zur Zeit mit dem Erstellen einer Website.


    Dabei soll eine Art "Zielscheiben"-Diagramm erstellt werden. Das ist effektiv ein Kreis, der in mehrere Segmente (2 bis 5 Stück) eingeteilt ist. Zum Erstellen dieser Zielscheibe sollen Daten aus einer MySQL-Datenbank ausgelesen werden (in wie viele Segmente muss der Kreis unterteilt werden, wie werden diese beschriftet).


    Der Nutzer soll dann in jedes Segment einen Klick setzen. Dessen Position soll ausgelesen werden und wenn alle Klicks gesetzt sind (in jedes Segment jeweils 1 Klick) sollen die Daten zu den Klicks dann wieder an die Datenbank geschickt und dort gespeichert werden. Für die Position der Klicks ist jeweils nur interessant, in welchem Segment sie sind und welchen Abstand sie vom Kreismittelpunkt haben.


    Die Datenbank ist schon einsatzfähig und die Kommunikation mit ihr dürfte auch kein Problem sein. Allerdings habe ich noch keine Idee, wie so ein Kreis-Diagramm dynamisch erstellt werden kann und wie die Klicks aufzunehmen sind. Ich denke, dass da irgendwie eine Mischung aus PHP und JavaScript genutzt werden muss. JavaScript zum Erstellen des Diagramms und für die Positionsbestimmung der Klicks und PHP fürs Schreiben der Daten in die Datenbank.


    Hat jemand eine konkrete Idee, wie das Ganze umgesetzt werden könnte? Denn ich habe bis jetzt noch keine Erfahrung mit JavaScript und habe die restliche Website drumherum bisher mit PHP aufgebaut. Über Anregungen und Vorschläge würde ich mich sehr freuen, denn ich stehe momentan ziemlich auf dem Schlauch.

  • Den Kreis mit den einzelnen Sektionen kannst Du vorteilhaft mit HTML5-Canvas aufbauen. Ich empfehle dabei, ein Framework wie jCanvas zu benutzen, da das die Handhabung sehr vereinfacht. Unterstützt Mouse- und Touch-Events und die Ermittlung der Mausposition. Die Daten kannst Du dann mit Ajax an den Server schicken und mit einem PHP-Skript in die Datenbank eintragen.
    http://projects.calebevans.me/jcanvas/docs/arcs/


    http://projects.calebevans.me/jcanvas/docs/eventAPI/


    http://projects.calebevans.me/jcanvas/docs/eventProperties/

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!