Radial Pie Menu Mit Raphael JS

Question

Danke für das Betrachten meines Dilemmas. Ich versuche, ein SVG-Menü mit Raphael zu erstellen, und ich bin schrecklich mit Geometrie.

Das Bild unten zeigt, was ich mache. Ich habe bereits den blauen/mittleren Teil mit CSS erstellt, aber es scheint, dass es wirklich keinen anderen guten Weg gibt, den weißen/äußeren Teil zu bekommen. Bilder & CSS-Art in dieser Hinsicht wegen der Block-Natur dieser Elemente fehlschlagen. Ich möchte eine Reihe von Bögen erzeugen, deren Größe abhängig von der Anzahl der Elemente variieren kann.

Also, irgendwelche Ratschläge, wie man über das Erhalten einer Reihe von anklickbaren Bögen gehen, die einen Viertelkreis bilden und Hover-Effekte haben können? Ich werde auch auf diese Dinge Symbole setzen wollen, wenn das wichtig ist.

Ich habe ein paar Beispiele für die Verwendung des Kreisdiagramms in Raphael gesehen, und ich sehe nur nicht, wie man es anpasst. Pfui. Ich hätte in der Geometrie aufpassen müssen.

Danke für Ihre Zeit.

Answer 1

Die Geometrie ist nicht wirklich so schlecht, zumindest ist es nicht so nervig wie die elliptical arc path syntax in SVG. Beide sind überschaubar.

Hier ist eine Funktion, die eine Reihe von Bogensegmenten als Pfade, Gabe jeden (zusammen mit beliebigen Metadaten für das Element) auf eine Rückruffunktion erzeugt wird:

function generateRadialNav(paper,  // Raphael's paper object 
          cx, cy,  // x and y coordinates of the center of the circle from which the arcs will be calculated 
          inner_radius, // pixels from origin to interior arc 
          radial_thickness, // width of navigation area in pixels 
          menu_items, // an object with one key per menu item; the value of each key is arbitrary 
          callback,  // a finalization callback for menu items which should accept three arguments: the menu_items key, the path element, and the menu_items value. The first and third parameters are taken directly from the menu_items object. 
          options)  // Unused but added out of habit. 
{ 
    options = options || {}; 

    var start_radians = options.start_radians || 0; 
    var end_radians = options.end_radians || Math.PI/2; 
    var menu_item_count = 0; 
    for (var k in menu_items) 
     menu_item_count++; 

    var slice_radians = (end_radians - start_radians)/menu_item_count; 

    var index = 0; 
    for (var k in menu_items) 
    { 
     var path = []; 
     path.push("M", cx + Math.cos(start_radians + slice_radians * index) * inner_radius, cy + Math.sin(start_radians + slice_radians * index) * inner_radius); 
     path.push("L", cx + Math.cos(start_radians + slice_radians * index) * (inner_radius + radial_thickness), cy + Math.sin(start_radians + slice_radians * index) * (inner_radius + radial_thickness)); 
     path.push("A", 
       inner_radius + radial_thickness, inner_radius + radial_thickness, 
       slice_radians, 0, 1, 
       cx + Math.cos(start_radians + slice_radians * (index + 1)) * (inner_radius + radial_thickness), cy + Math.sin(start_radians + slice_radians * (index + 1)) * (inner_radius + radial_thickness)); 
     path.push("L", cx + Math.cos(start_radians + slice_radians * (index + 1)) * inner_radius, cy + Math.sin(start_radians + slice_radians * (index + 1)) * inner_radius); 
     path.push("A", 
        inner_radius, inner_radius, 
        slice_radians, 0, 0, 
        cx + Math.cos(start_radians + slice_radians * index) * inner_radius, cy + Math.sin(start_radians + slice_radians * index) * inner_radius); 
     path.push("Z"); 

     var element = paper.path(path).attr({ fill: 'none', stroke: 'none' }); 
     callback(k, element, menu_items[k]); 

     index++; 
    } 
} 

Diese Funktion ist im wesentlichen die Region berechnen Jedes Navigationselement generiert einen Pfad mit dieser Form und übergibt dann die Menüdefinition an einen Rückruf. Jede Unterstützung für Symbole müsste separat hinzugefügt werden, aber ich würde vorschlagen, dass die Daten in der menu_items -Definition einfach erweitert werden könnten, um sie zu unterstützen. Ein Beispiel für diese Methode ist my test page - bitte entschuldigen Sie die Ecken der Eile!