Menu tròn xuyên tâm với Raphael JS

Question

Cảm ơn bạn đã xem xét tình trạng khó xử của tôi. Tôi đang cố gắng tạo một menu SVG với raphael, và tôi rất kinh khủng với hình học.

Hình ảnh bên dưới hiển thị những gì tôi đang tạo. Tôi đã tạo phần màu xanh/trung tâm với CSS nhưng có vẻ như không có cách nào khác tốt để lấy phần màu trắng/bên ngoài. Hình ảnh & Loại CSS thất bại trong vấn đề này do tính chất khối của các yếu tố này. Tôi muốn tạo ra một loạt các cung có thể có kích thước tùy thuộc vào số lượng các phần tử.

Vì vậy, bất kỳ lời khuyên về cách đi về nhận được một loạt các vòng cung có thể nhấp, tạo thành một vòng tròn quý và có thể có tác di chuột? Tôi cũng sẽ muốn đặt các biểu tượng trên những thứ này, nếu điều đó quan trọng.

Tôi đã thấy một vài ví dụ về việc sử dụng biểu đồ hình tròn trong raphael và tôi không thấy cách điều chỉnh nó. Ugh. Tôi nên chú ý trong hình học.

Cảm ơn thời gian của bạn.

Answer 1

Hình học không thực sự tồi tệ, ít nhất nó không gây phiền nhiễu như elliptical arc path syntax in SVG. Cả hai đều có thể quản lý được.

Dưới đây là một chức năng mà sẽ tạo ra một loạt các đoạn vòng cung như những con đường, đưa cho mỗi người (cùng với siêu dữ liệu tùy ý cho mục đó) cho một hàm callback:

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

Chức năng này về cơ bản sẽ tính toán khu vực cho mỗi mục điều hướng, tạo ra một đường dẫn với hình dạng đó, và sau đó chuyển định nghĩa menu sang một cuộc gọi lại. Bất kỳ hỗ trợ cho các biểu tượng sẽ phải được thêm một cách riêng biệt, nhưng tôi sẽ đề nghị rằng các dữ liệu trong định nghĩa menu_items có thể dễ dàng được tăng cường để hỗ trợ nó. Ví dụ về phương pháp này được sử dụng, hãy kiểm tra my test page - tha thứ cho các cạnh thô của sự vội vàng, tất nhiên!