拉斐爾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 - 赦免急速的粗糙邊緣！當然！