राफेल जेई

Question

के साथ रेडियल पाई मेनू मेरी दुविधा को देखने के लिए धन्यवाद। मैं राफेल के साथ एक एसवीजी मेनू बनाने की कोशिश कर रहा हूं, और मैं ज्यामिति के साथ भयानक हूं।

नीचे दी गई छवि दिखाती है कि मैं क्या कर रहा हूं। मैंने पहले ही सीएसएस के साथ नीला/केंद्र भाग बनाया है, लेकिन ऐसा लगता है कि सफेद/बाहरी भाग पाने के लिए वास्तव में कोई और अच्छा तरीका नहीं है। छवियों & इन तत्वों की ब्लॉक प्रकृति के कारण इस संबंध में सीएसएस की तरह असफल रहा। मैं आर्क की एक श्रृंखला उत्पन्न करना चाहता हूं जो तत्वों की संख्या के आधार पर आकार में हो सकता है।

तो, क्लिक करने योग्य आर्क्स कि एक चौथाई चक्र फार्म और मंडराना प्रभाव हो सकता है की एक श्रृंखला करने के बारे में जाने के लिए पर कोई सलाह? अगर मैं मायने रखता हूं, तो मैं इन चीजों पर भी आइकन रखना चाहता हूं।

मैंने राफेल में पाई चार्ट का उपयोग करने के कुछ उदाहरण देखे हैं, और मुझे नहीं लगता कि इसे कैसे अनुकूलित किया जाए। ओह। मुझे ज्यामिति में ध्यान देना चाहिए था।

अपने समय के लिए धन्यवाद।

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

इस समारोह अनिवार्य रूप के लिए इस क्षेत्र की गणना करेगा:

यहाँ एक समारोह है कि पथ के रूप चाप क्षेत्रों की एक श्रृंखला उत्पन्न होगा, उसे कॉलबैक फ़ंक्शन पर (उस आइटम के लिए मनमाने ढंग से मेटाडाटा के साथ) हर एक सौंपने है प्रत्येक नेविगेशन आइटम, उस आकार के साथ पथ उत्पन्न करता है, और फिर कॉलबैक में मेनू परिभाषा पास करता है। आइकन के लिए किसी भी समर्थन को अलग से जोड़ा जाना होगा, लेकिन मैं सुझाव दूंगा कि मेनू_इटम्स परिभाषा में डेटा को आसानी से समर्थन देने के लिए बढ़ाया जा सकता है। उपयोग में इस विधि के उदाहरण के लिए, my test page देखें - जल्दबाजी के किसी न किसी किनारों को क्षमा करना!