Operations Boolean trên những con đường SVG

Question

Tính đến đầu năm 2014, SVG spec không có bất cứ built-in hỗ trợ cho Boolean hoạt động

Boolean hoạt động là phương pháp để thay đổi hình dạng vốn có của con đường chủ yếu là chồng chéo. Chúng cho phép xây dựng các hình dạng phức tạp bằng cách thực hiện các phép toán trên các hình dạng đơn giản hơn và bằng cách nào đó tương tự như Constructive Solid Geometry(CSG).

Tuy nhiên câu hỏi này đề cập đến đường dẫn vector 2D. Các hoạt động phổ biến của đường dẫn là: Liên minh, Đường con, Giao lộ, XOR (Exclusive Or).

Có thư viện nào nổi xung quanh đó có thể giúp tôi hiểu điều này không?

Answer 1

Có Javascript Clipper, cho phép tất cả các bộ Boolean Operations trên đường dẫn nhưng trong điều kiện đường dẫn nhập là đa giác .

• Nếu chúng tôi có bất kỳ đường cong (Cubic/Quadratic Bezier Curves), chúng có thể được chia nhỏ để đa giác một cách dễ dàng bằng cách sử dụng De Casteljau algorithm.

  • Nếu mẫu phân mục đủ cao, kết quả sẽ là một đa giác trông trực quan giống như đường cong (với chi phí của một lượng lớn dữ liệu khi số lượng đỉnh tăng tuyến tính, tùy thuộc vào độ trung thực của phân khu).

Sau đó, chúng ta có thể nuôi sống con đường trong JavaScript Clipper cho hoạt động Boolean.

---

Thông báo trước ở đây là chúng tôi mất bản chất "cong" vốn có của đường dẫn nếu nó chứa đường cong. Việc "đa giác hóa" được đề cập ở trên là, nhiều hay ít, một con đường một chiều.