ラジアルパイメニューRaphael JS

Question

私のジレンマを見てくれてありがとう。私はラファエルで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をチェックしてください - もちろん、急いで粗いエッジを捨ててください！