Cách thanh lịch hơn để thay đổi kích thước đường dẫn ngành sử dụng Raphaël JS và SVG?

Question

Tôi đang sử dụng Raphaël lần đầu tiên với ít kinh nghiệm svg và tôi cần một người thực sự am hiểu với hai điều này để giúp tôi.

Tôi đã tạo biểu đồ hình tròn với các lĩnh vực động. Các lĩnh vực có thể được thay đổi kích cỡ bằng cách kéo vào các nút tròn. Xem this fiddle. Tôi chỉ được thử nghiệm trong Chrome và Safari là các trình duyệt được yêu cầu duy nhất.

Biểu đồ hình tròn chưa hoàn chỉnh. Các lĩnh vực có thể chồng lên nhau. Vui lòng bỏ qua điều này ngay bây giờ.

Tôi đã gặp phải sự cố, khi góc bắt đầu của một khu vực lớn hơn góc kết thúc. Đây là trường hợp khi góc kết thúc vượt qua mốc 0/360 °. Để giải quyết điều này, tôi đã sử dụng đường dẫn xoay-tham số. Tôi chuyển ngành về phía trước trong khi di chuyển các góc quay, cho đến góc cuối cùng là ở 360. Bạn có thể thấy điều này trong fiddle trong hàm này:

function sector_update(cx, cy, r, startAngle, endAngle, sec) { 
    var x1 = cx + r * Math.cos(-startAngle * rad), 
     x2 = cx + r * Math.cos(-endAngle * rad), 
     y1 = cy + r * Math.sin(-startAngle * rad), 
     y2 = cy + r * Math.sin(-endAngle * rad); 


    var rotation = 0; 

    // This is the part that I have the feeling could be improved. 
    // Remove the entire if-clause and let "rotation" equal 0 to see what happens 
    if (startAngle > endAngle) { 
     rotation = endAngle; 
     startAngle = startAngle - endAngle; 
     endAngle = 360; 
    } 

    sec.attr('path', ["M", cx, cy, "L", x1, y1, "A", r, r, rotation, 
    +(endAngle - startAngle > 180), 0, x2, y2, "z"]); 
} 

Mặc dù nó hoạt động độc đáo, tôi là một chút hoài nghi. Điều này có thể được giải quyết mà không có sự quay của con đường? Tôi đánh giá cao bất kỳ trợ giúp hoặc con trỏ.

Answer 1

Can this be solved without the rotation of the path?

Trả lời: Vâng, nó có thể. Bạn không phải thay đổi vòng quay của con đường. Trừ khi tôi là thiếu cái gì, đoạn mã sau dường như làm việc giống như những gì bạn có trong fiddle:

function sector_update(cx, cy, r, startAngle, endAngle, sec) { 
    var x1 = cx + r * Math.cos(-startAngle * rad), 
     x2 = cx + r * Math.cos(-endAngle * rad), 
     y1 = cy + r * Math.sin(-startAngle * rad), 
     y2 = cy + r * Math.sin(-endAngle * rad); 

    //notice there is no "roation" variable 
    if (startAngle > endAngle) { 
     startAngle -= endAngle; 
     endAngle = 360; 
    } 

    sec.attr('path', ["M", cx, cy, "L", x1, y1, "A", r, r, 0, 
    +(endAngle - startAngle > 180), 0, x2, y2, "z"]); 
} 

Giải thích: Đối với lời giải thích của tôi, tôi sẽ sử dụng các thuật ngữ SVG trong W3 Spec và Raphael Reference Library . Tức là, trong khi bạn sử dụng cx, cy và rotation, chúng sử dụng rx, ry và x-axis-rotation tương ứng.

Tóm lại, bất cứ khi nào rx bằng ry, thì x-axis-rotation là vô nghĩa.

Nhìn vào this SVG. Sử dụng các công cụ phát triển của trình duyệt hoặc lưu SVG vào máy tính của bạn và sử dụng trình chỉnh sửa tệp để chỉnh sửa. Cụ thể, hãy xem phần tử path cuối cùng, có bốn vòng cung trong đó. Hãy thử sửa đổi giá trị x-axis-rotation trên mỗi cung. Bạn sẽ nhận thấy rằng cung đầu tiên (trong đó rx và ry đều là "25") không bao giờ thay đổi khi bạn cập nhật giá trị x-axis-rotation.

Tại sao? Điều này là do bạn có một vòng cung tròn. Không có vấn đề bao nhiêu bạn xoay một vòng tròn, nó sẽ vẫn là cùng một vòng tròn. Ví dụ, giữ một ly ở phía trước của bạn để kính nằm ngang mặt đất, và bạn đang nhìn trực tiếp xuống kính. Bây giờ xoay/xoay kính bằng cổ tay của bạn. Bạn có thấy hình dạng tròn mà bạn nhìn thấy trong cùng một hình tròn không? Bây giờ đặt kính trên bàn bình thường (vì vậy nó là thẳng đứng và có thể chứa một chất lỏng). Bây giờ lật kính lên. Bạn có thể thấy sự thay đổi quan điểm rõ ràng; nó đang hướng lên, nhưng bây giờ nó đang nằm phẳng. Đó là những gì x-axis-rotation thực hiện.

Có lẽ ví dụ tốt hơn là chỉ phát xung quanh với tệp SVG nói trên.Chơi với x-axis-rotation trên các cung trong phần tử path cuối cùng. Bạn sẽ thấy các vòng cung được xoay quanh. Đó là những gì x-axis-rotation thực hiện.

Quay lại mã của bạn: Vì bạn chỉ giao dịch với các đối tượng hình tròn, x-axis-rotation sẽ không tạo sự khác biệt về kết quả cuối cùng. Vì vậy, miễn là bạn đang chỉ giao dịch với các đối tượng hình tròn, bạn có thể mã hóa cứng giá trị của nó bằng không mà không phải lo lắng. Tất cả những gì bạn thực sự cần làm là chỉnh sửa các góc độ mà bạn đã thực hiện một cách chính xác.

Hiệu suất: Tôi đã thử sử dụng JavaScript để thời gian hàm sector_update của bạn có và không thay đổi biến số x-axis-rotation. Kết quả? Tôi thấy không có sự khác biệt về hiệu suất. Phần lớn thời gian dành cho thực tế là vẽ SVG, không phải trên toán học xác định giá trị của nó. Thực tế, tất cả những gì bạn thực sự làm trong JavaScript là cập nhật mã để đặt giá trị trong phần tử path. Tại thời điểm đó, trình duyệt tiếp quản công cụ rendering của nó để thực sự vẽ đối tượng SVG. Tôi cho rằng đó là vấn đề trên mỗi trình duyệt, vì mỗi trình duyệt có hiệu suất hiển thị khác nhau. Nhưng cho dù giá trị x-axis-rotation có hiệu lực hay không, tôi đoán là không. Nếu có là một lần truy cập hiệu suất (vì trình duyệt có thể phải thực hiện thao tác dấu chấm động bổ sung), nó cực kỳ tranh luận vì phần lớn thời gian được dùng để vẽ đối tượng, chứ không tính giá trị của nó. Vì vậy, tôi sẽ nói không phải lo lắng về nó.

Tôi hy vọng sẽ giúp, cho tôi biết nếu tôi bỏ lỡ điều gì đó hoặc không giải thích điều gì đó đủ tốt.