2013-06-19 19 views
12

svg path tarafından çizilen iki şeklin kesişip kesilmediğini sınamak için iyi bir yöntem (hem kod hem de performans açısından) nedir? Bunu d3'te yapıyorum ve "kardinal-kapalı" line interpolationkesişen svg kapalı yolları

Daha spesifik olarak, dışbükey gövdeler (görüntüden daha karmaşık) oluşturuyorum ve üst üste geldikleri takdirde kabukları birleştirmek istiyorum. "Doğrusal-kapalı" bir enterpolasyon kullanırsam bunu yapmak çok kolaydır, çünkü kesişmeleri hesaplamak için köşeleri kullanabilirim, fakat kullandığım yerde "kardinal-kapalı" enterpolasyon daha iyi görünür. İşte

Output of code

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)); 

bir jsfiddle olduğunu. Bu şekillerin kesişip/çakıştığını nasıl test ederim?

+0

kullanması gerektiğini söyledi gibi. Eğer bunu 'lineer' olarak ayarlarsanız, iki şekil kesişmez. Bu şekilde bir testin (http://en.wikipedia.org/wiki/Cubic_Hermite_spline#Cardinal_spline) meydana gelmesiyle ilgili bir şey, – elsherbini

+7

testiyle geldiğinde dikkate alınmak zorundadır. Harika [Kevin Lindsey'in kesişme kütüphanesini kullanabilirsiniz] (http://www.kevlindev.com/geometry/2D/intersections/index.htm) iki SVG şeklinin kesişip sınandığını test etmek için. – Phrogz

+0

Teşekkür ederim @Phrogz, bu kütüphane gerçekten harika! :) – swenedo

cevap

4

@Phrogz Sana kardinal-* kapalı yollar yapılır `nasıl asıl meseleye girmek zorunda kalacak düşünüyorum muhtemelen intersection library.