Menú de pie radial con Raphael JS

Question

Gracias por ver mi dilema. Estoy tratando de hacer un menú SVG con Rafael, y soy terrible con la geometría.

La imagen de abajo muestra lo que estoy haciendo. Ya creé la parte azul/central con CSS, pero parece que realmente no hay otra forma de obtener la parte blanca/externa. Imágenes & CSS tipo de falla en este sentido debido a la naturaleza de bloque de estos elementos. Me gustaría generar una serie de arcos que podrían variar en tamaño dependiendo de la cantidad de elementos.

Por lo tanto, ningún consejo sobre cómo hacer para conseguir una serie de arcos con enlaces que forman un cuarto de círculo y que pueden tener efectos de activación? Voy a querer poner íconos en estas cosas también, si eso importa.

He visto algunos ejemplos del uso del gráfico circular en raphael, y simplemente no veo cómo adaptarlo. Ugh. Debería haber prestado atención en geometría.

Gracias por su tiempo.

Answer 1

La geometría no es realmente tan mala, al menos no es tan molesto como el elliptical arc path syntax in SVG. Ambos son manejables.

Así es una función que va a generar una serie de segmentos de arco como caminos, entregando cada uno (junto con los metadatos arbitrario para ese artículo) a una función de devolución de llamada:

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++; 
    } 
} 

Esta función calculará esencialmente la región para cada elemento de navegación, genere una ruta con esa forma, y ​​luego pase la definición del menú a una devolución de llamada. Cualquier soporte para íconos debería agregarse por separado, pero sugeriría que los datos en la definición de menu_items puedan ser aumentados fácilmente para soportarlo. Para un ejemplo de este método en uso, echa un vistazo a my test page - perdonar los bordes ásperos de la prisa, por supuesto!