giao nhau với đường dẫn khép kín svg

Question

Cách tốt nhất (cả mã khôn ngoan và hiệu năng) để kiểm tra xem hai hình dạng được vẽ bởi svg path có giao nhau không? Tôi đang thực hiện điều này trong d3 và đang sử dụng "đóng dấu chính" trong số

Cụ thể hơn, tôi đang tạo vỏ lồi (phức tạp hơn trong hình ảnh) và tôi muốn kết hợp vỏ nếu chúng chồng lên nhau. Sẽ dễ dàng nếu tôi sử dụng nội suy "tuyến tính đóng", vì sau đó tôi có thể sử dụng các đỉnh để tính các giao lộ, nhưng nội suy "hồng y đóng" trông tốt hơn khi tôi sử dụng nó.

var v1 = [[100,100],[200,100],[200,200],[100,200]], 
v2 = [[210,100],[310,100],[310,200],[210,200]]; 

var hull1 = d3.geom.hull(v1), 
    hull2 = d3.geom.hull(v2); 

var svg = d3.select("#foo") 
    .append("svg"); 

var line = d3.svg.line() 
    .interpolate("cardinal-closed") 
    .x(function(d) {return d[0];}) 
    .y(function(d) {return d[1];}); 

svg.append("path") 
    .attr("d", line(hull1)); 
svg.append("path") 
    .attr("d", line(hull2)); 

Đây là một jsfiddle. Làm cách nào để kiểm tra xem các hình dạng này có giao nhau/chồng chéo không?

Answer 1

Như @Phrogz nói có lẽ bạn nên sử dụng intersection library.