SORU
14 AĞUSTOS 2011, Pazar


nasıl N puan javascript HTML5 tuval kullanılarak pürüzsüz bir eğri çizecek?

Çizim uygulaması için fare hareketi, bir dizi sonra lineTo ile çizim koordinatları kurtarıyorum. Sonuç satırı düzgün değil. Nasıl toplandı noktaları arasında tek bir eğri üretebilir miyim?

Ama sadece çizim hatları için 3 fonksiyonları buldum Google'da tarattım: 2 örnek puan, sadece kullanmak lineTo. 3 örnek quadraticCurveTo, 4 örnek puan için, bezierCurveTo puan.

(Bir bezierCurveTo çizim dizideki her 4 puan için çalıştım, ama bu karışıklığı her örnek 4 puan yerine, sürekli düz bir eğri yol açar.)

Nasıl 5 örnek noktaları düzgün bir eğri çizmek için bir işlevi ve ötesinde yazacağım?

CEVAP
14 AĞUSTOS 2011, Pazar


Sonraki örnek katılımı ile bu problem ayrık "" type eğrileri buluştuğu düzgün olmayan fonksiyonları,. curveTo ile birlikte puan Bu iki eğrinin son noktası paylaşım ama tamamen ayrık kontrol noktaları etkilenir çünkü. Bir çözüm için "curve" 2 Sonraki sonraki örnek noktaları arasındaki orta noktalar. Eğrileri yeni aralıklı bu noktaları kullanarak katılmadan uç noktaları (ne bir yineleme için bir son nokta olur . pürüzsüz bir geçiş sağlar ^em>kontrol noktasısonraki yineleme için.) Diğer bir deyişle iki ayrı eğriler şimdi çok daha fazla ortak yanı var.

Bu çözüm, kitaptan çıkarılan "Temel ActionScript 3.0 Animasyon: eşyaları hareket Yapma". p.95 - oluşturma teknikleri: çoklu eğriler oluşturma.

Not: bu çözüm değil aslında kura ile her bir puan, hangi başlık benim sorum (daha doğrusu tahmin eğrisi ile numune puan ama asla geçer örnek puan), ama benim amaçlar için (çizim uygulaması), bu benim için yeterince iyi ve görsel olarak söyleyemez fark. Yokbir çözüm tüm örnek noktalar üzerinden gitmek, ama çok daha karmaşık (http://www.cartogrammar.com/blog/actionscript-curves-update/)

Burada yaklaşım yöntemi için resim kodu:

// move to the first point
   ctx.moveTo(points[0].x, points[0].y);


   for (i = 1; i < points.length - 2; i   )
   {
      var xc = (points[i].x   points[i   1].x) / 2;
      var yc = (points[i].y   points[i   1].y) / 2;
      ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
   }
 // curve through the last two points
 ctx.quadraticCurveTo(points[i].x, points[i].y, points[i 1].x,points[i 1].y);

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Chip Johnson

    Chip Johnson

    30 AĞUSTOS 2007
  • spectragirlz16's channel

    spectragirlz

    22 Ocak 2012
  • The Warp Zone

    The Warp Zon

    24 AĞUSTOS 2007