Möchte ein Pie Menu mit Javascript erstellen

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hey Leute (:

Ich möchte für eine Website mit Javascript ein Pie Menu erstellen. Es hat prinzipiell keine Eile, trotzdem möchte ich es nicht weiter vor mir herschieben und ihr habr mir hier schon bei meinen anderen Fragen so gut geholfen gehabt :grin:

Das Menü soll in der Mitte ein runde PNG haben und ringsförmig das Menu darüber.

  1. Wie erstelle ich am besten die Form, damit sie auch skalierbar ist? Vektorgrafik oder direkt im Code zeichnen?
  2. Wie definiere ich dann am besten die Bereiche der einzelnen Buttons? Mapping erscheint mir ein wenig aufwändig?

Besten Dank!

#2

Hi,

Wie erstelle ich am besten die Form, damit sie auch skalierbar ist? Vektorgrafik oder direkt im Code zeichnen?

Ja und Ja…per Vektorgrafik ist die Form frei skalierbar -> direkt im Code (HTML) zeichnen ist „SVG“ und auch eine Vektor-Semantik.

Wie definiere ich dann am besten die Bereiche der einzelnen Buttons? Mapping erscheint mir ein wenig aufwändig?

Auf die schnelle:
http://www.mediaevent.de/tutorial/svg.html

Gruß XXD

#3

Super danke dir, dass schaut aufs erste Überfliegen nach dem Richtigen aus. :blush:

#4

Also das würde ich nicht selbst schreiben. Wenn du eh schon auf Javascript setzt, dann nimm ein fertiges Tool zum Erzeugen von derlei Grafiken.

http://www.highcharts.com/demo/pie-basic
oder
http://www.chartjs.org/
oder
https://startpage.com/do/search?q=javascript%20pie%20chart

Da gibt es mit Sicherheit auch die Option es zu verlinken.

#5

Ich bin inzwischen schon vorran gekommen und habe die grobe Grundlage geschaffen. Leider fehlt aktuell ein bisschen die Zeit um eine anständige Session zu starten… :confused:

Jedenfalls sehen mir deine Links zwar ähnlich aus zu dem was ich schreiben möchte, jedoch sind es keine Menüs. Und auch ein paar, nicht erwähnte, Funktionalitäten fehlen mir.

Trotzdem besten Dank!

#6

Ich habe mir das nicht im Detail angeschaut aber ich kann mir gut vorstellen, dass man da auch Links auf die einzelnen Bereiche setzen kann. Müsstest du halt mal die DOkumentation lesen.

Und wenn gar nichts hilft:
Zumindest das eine kann die png-Grafiken erzeugen über die du dann nur eine imagemap legen musst.

Solche Fragen liebe ich ja: „Ich will ein Auto in blau.“

Dann kriegt man eine Antwort zu irgendeinem blauen Auto. Und dann heißt es: „Hab ich nicht gesagt, aber es darf nur ein Toyota sein und nur 3 Räder haben, mit einem Flüssiggasantrieb. Und 1.000 km Reichweite soll er auch haben. Ledersitze mit Klimaanlage sind ein Muss! Abstandshalter wäre gut, aber nicht nötig. Außerdem soll es ein stark rötliches Blau sein, kein blaues blau.“

Und was du uns hiermit sagen willst:

ist mir völlig rätselhaft. Was hast du vorbereitet? Was ist dein Ansatz? Wofür hast du welche Grundlage geschaffen?

=> macht es überhaupt noch Sinn, dich in dieser Frage weiter offen zu beraten oder hast du dich schon auf einen Lösungsweg versteift und alle Hilfen links und rechts davon sind unnütz?

#7

Entschuldigung, ich wollte dich auf keinen Fall angreifen.

Ja, dass man sicher Links darüber legen kann habe ich mir auch gedacht, jedoch hat ein kurzer (wirklich kurzer) Blick in die Dokumentation, zumindest auf den ersten Blick, mir gesagt, dass das ganze halt wirklich sehr auf charts ausgelegt ist.

Entschuldigung dass ich nicht alles bis in kleinste Detail beschreiben wollte, da hätte ich auch gleich fragen können, ob mir das wer ganz genau so wie es möchte hinschreibt!

Ich nehme Tipps immer gerne an, jedoch sind nicht immer alle Ratschläge, so nett sie auch gemeint sind, hilfreich.

#8

Du musst dich da nicht entschuldigen. Aber dennoch gilt: je genauer du deine Anforderungen und Lösungsansätze beschreibst, desto besser kann man dir helfen.

Na klar. Das ist ja auch genau das, was du am Anfang als Anforderung beschrieben hast. Ein Chart mit Links.

Das habe ich auch nicht erwartet, wollte ich auch nicht ausdrücken. Aber deine Antwort klang wie: „Ätsch, hab dir nicht alles gesagt, deswegen war die Zeit, die du hier EHRENAMTLICH für mich investiert hast für die Füße.“