拉斐尔JS径向馅饼菜单

Question

谢谢你看我的困境。我正在尝试用raphael制作一个SVG菜单，而且我的几何图形很糟糕。

下图显示了我正在做什么。我已经用CSS创建了蓝色/中心部分，但似乎没有其他好的方法来获得白色/外部部分。图片&由于这些元素的块性质，CSS在这方面的失败。我想生成一系列的弧线，其大小取决于元素的数量。

那么，如何去获得一系列形成四分之一圆，可以有悬停效果点击弧线什么建议吗？如果重要的话，我也想在这些东西上放置图标。

我已经看到了在拉斐尔使用饼图的几个例子，我只是看不到如何去适应它。啊。我应该注意几何。

谢谢你的时间。

Answer 1

几何不是真的那么糟糕，至少它不像elliptical arc path syntax in SVG那样烦人。两者都可以管理。

下面是将产生一系列弧段作为路径的，（具有任意的元数据一起用于该项目）交给每一个以一个回调函数的函数：

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

该功能将基本上计算该区域每个导航项目，生成具有该形状的路径，然后将菜单定义传递给回调。任何对图标的支持都必须单独添加，但我建议menu_items定义中的数据可以很容易地增加以支持它。对于使用此方法的示例，请查看my test page - 赦免急速的粗糙边缘！当然！