Radyal Pasta Menüsü Raphael JS ile

Question

İkilemime baktığınız için teşekkür ederiz. Raphael ile SVG menüsü yapmaya çalışıyorum ve geometri ile çok kötüyüm.

Aşağıdaki resim ne yaptığımı gösterir. Mavi/orta parçayı CSS ile oluşturdum ama beyaz/dış parçayı elde etmenin başka hiçbir iyi yolu yok gibi görünüyor. Bu elemanların blok yapısından dolayı bu konuda başarısızlık. Eleman sayısına bağlı olarak büyüklükte olabilen bir dizi yay oluşturmak istiyorum. Yani

, çeyrek daire oluşturur ve vurgulu etkileri olabilir tıklanabilir yay bir dizi alma hakkında gitmek nasıl herhangi bir tavsiye? Bu konularda da simgeleri yerleştirmek istiyorum, eğer önemliyse.

Raphael'de pasta grafiğini kullanmanın birkaç örneğini gördüm ve bunu nasıl uyarlayacağımı anlamıyorum. Ugh. Geometriye dikkat etmeliydim.

Zaman ayırdığınız için teşekkür ederiz.

Answer 1

Geometri, o kadar da kötü değil, en azından elliptical arc path syntax in SVG kadar rahatsız edici değil. Her ikisi de yönetilebilir. Bu fonksiyon esas bölgeyi hesaplar

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

: Burada

yollar olarak yay segmentlerinin bir dizi oluşturmak Bir geri arama işlevi (yani öğenin rasgele meta verileri ile birlikte) her biri teslim edecek bir fonksiyon Her gezinme öğesi, bu şekildeki bir yol oluşturur ve menü tanımını bir geri aramaya geçirir. Simgeler için herhangi bir destek ayrı ayrı eklenmelidir, ancak menü_items tanımındaki verilerin bunu desteklemek için kolayca artırılabileceğini öneririm. Kullanımdaki bu yöntemin bir örneği için, my test page - acele etmeyen pürüzlü kenarları affedin!