2013-03-27 37 views
5

tipik olarak format JSON koordinatlarının bir dizi göz önüne alındığında:Bağlantılı eğri çizgiler

{from: {x:0, y:0}, to: {x:0, y:10}, ...} 

Basit, sabit yarıçaplı yuvarlatılmış köşelere sahip bağlanır düz noktalı yolların bir dizi çekmek istiyoruz. Düz çizgi boyunca noktaları hesaplamak için Eğim Kesişim Formu'na bakıyordum ama (Bezier?) Eğrileri boyunca noktaları hesaplamak için yaklaşıma biraz şaşırdım.

örn. P1 ve p2 ile p3 ve p4 arasında eğriler çizmek istiyorum. Zayıf mockup'un ne anlama gelebileceğine rağmen, köşelerin sabit bir yarıçap olması için mutluyum, örn. 10px

Path

Ben çizim mantığı dışarı soyut ve bu nedenle daha sonra (bir dizi yolla oluşturulup oluşturulamayacağını dolayısıyla herhangi dahili kullanarak kaçınarak am bir JavaScript noktası dizi dönen bir genelleştirilmiş bir yaklaşım arıyorum istiyorum SVG, Canvas vb. tarafından sağlanan fonksiyonlar.

+1

Ne kadar hesaplamalı kaynak koymak istiyorlar? Herhangi bir kısıtlama yoksa, bir elips yerleştirebilirsiniz, böylece p1 ve p2'yi birbirine bağlar ve eğimi çizgilerin eğimi ile eşleşir. – ElKamina

+0

Programınızın çıktısı ne olmalıdır? –

+0

"Köşelerle bağlanan noktalı çizgiler (noktalar)" - ne anlama geliyor? –

cevap

1

İstediğiniz şey kübik bir bezier eğrisidir. Bu sayfadaki ilk uygulaması olarak

http://www.blackpawn.com/texts/splines/

bak. Eğer A, p1 ise, D p2, AB yön 1'in açısı ve yön CD'si 2. satırın açısı, size ihtiyacınız olan özellikleri nasıl sağladığını görebiliyorsunuz - 1 numaralı açı ile başlıyor ve 2 numaralı açı ile bitiyor. puanlar.

Dolayısıyla, C ve D puanlarınızı almak için, bunu yapmanın bir yolu, 1. çizgi hattını almak, kopyalamak, p1'den başlayarak yerleştirmek ve yeni satırın nerede bittiğini söylemek B'dir ve benzerdir D için çizgi segmenti 2 ve p2 (Ve eğrilmiş çizgi parçaları 'eğrileri azar azar hale getirmek için mesafeyi çarpan bir faktör var gibi şeyler yapabilirsiniz ... vb)

O zaman sadece matematik yapın Eğer eğri için denklemi var bir kere :)

http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves

Ve istenilen Precisio bir delta t ile içinden adım n (ör. Her 0.1 t değerinde, her 0,01 ...) ve eğri üzerindeki her bir çift noktayı bir çizgi parçası olarak tükürür.

+0

Bağlantınız, eğrinin enterpolasyonu değil, bir gerçek değişkenin işlevinin enterpolasyonunu gösterir. (Paydada (x2-x1) var) –

+0

@Ivan Kuckir Doğru, utanıyorum. Daha iyi bir algoritma arayacağım. – Patashu

+0

BTW. Bunu biliyorum çünkü bunu uyguluyorum :) http://blog.ivank.net/interpolation-with-cubic-splines.html Photoshop eğrileri bu enterpolasyonu kullanır. –