Daire SVG'In arc yolu ile çizim | Netgez.com
SORU
20 NİSAN 2011, ÇARŞAMBA

Daire SVG'In arc yolu ile çizim

AÅŸağıdaki SVG yolunu çizebilir ™,99'luk bir daire: (deneyin http://jsfiddle.net/DFhUF/46/ ve bakın görün 4 yay veya sadece 2, ama unutmayın ki eÄŸer YANÄ°, iÅŸlenen VML, SVG, ama benzer sorunu)

M 100 100 a 50 50 0 1 0 0.00001 0

Ama bir daire 99.99999999% olduğunda, o zaman hiçbir şey gösterir misin?

M 100 800 a 50 50 0 1 0 0.00000001 0

Ve bir daire (hala bir yay, bir çok tam bir arc değil mi 0) ile aynı

M 100 800 a 50 50 0 1 0 0 0

Nasıl düzeltilebilir? Sebebi kullandığım bir fonksiyonu çizmek için bir yüzdesi bir yay ve bir şeye ihtiyacım olursa ... "özel durum" 99.9999 olasılıkla% veya 100% yay kullanmak için yukarı işlevi, çok iyi olur, çok saçma.

Yine, jsfiddle üzerinde test çalışması RaphaelJS kullanarak http://jsfiddle.net/DFhUF/46/
(ve eğer IE 8, hatta ikinci Daire gösterilmez üzerinde VML ise... 0.01 değiştirmek zorunda)

Güncelleme:

Bu sistemimizde bir skor için bir yay oluÅŸturma olduÄŸum için, 3. 3 puanlık bir dairenin 1/3 olsun. 0.5 yarım daire alır, ve 9.9 puan bir daire ™. Ama eÄŸer sistemimizde 9.99 puanları ise orada ne? Daire 99.999% yakın olup olmadığını kontrol edin ve arc bir fonksiyonu veya circle fonksiyon uygun ÅŸekilde kullanmak zorunda mıyım? Ne 9.9987 puan hakkında? Hangisini kullansak? Bu saçmalık için bilmek nasıl bir puan olacak bir harita "da tam çember" ve geçiÅŸ yapmak için bir daire iÅŸlev ve zaman "belli bir yüzde 99,9" bir daire veya bir 9.9987 puan, daha sonra kullanmak arc iÅŸlevi.

CEVAP
7 Mayıs 2012, PAZARTESİ

Biliyorum biraz geç oyunu, ama hatırladım bu soruyu bir zaman oldu ve ben vardı benzer bir dillemma, ve ben kazara buldum "doğru" çözüm, eğer biri hala arıyor

<path 
    d="
    M cx cy
    m -r, 0
    a r,r 0 1,0 (r * 2),0
    a r,r 0 1,0 -(r * 2),0
    "
/>

DiÄŸer bir deyiÅŸle, bu:

<circle cx="100" cy="100" r="75" />

bu bir yolu olarak elde edilebilir:

  <path 
        d="
        M 100, 100
        m -75, 0
        a 75,75 0 1,0 150,0
        a 75,75 0 1,0 -150,0
        "
  />

Hile iki yay, ikinci bir ilk bıraktığı yerden alıp ve özgün yay başlangıç noktasına geri dönmek için olumsuz çapı kullanarak.

Bu nedenle, mümkün değil gibi bir tam daire şeklinde bir kavis (ve ben sadece spekülasyon) çünkü sen olacağını söylüyor çizmek için bir yay kendisini (diyelim 150,150) kendisini (150,150), hangi işler olarak "oh, ben zaten orada, ark gerekli!".

Önerdiğim çözüm faydaları vardır:

  1. kolay doğrudan bir yol için bir daire çevirmek için
  2. iki eğri çizgiler veya desenler, vb işaretleri kullanıyorsanız sorunlarına neden olabilir) herhangi bir çakışma yok. İki parça halinde çizilmiş de olsa temiz sürekli bir çizgi.

Bunların hiçbiri sadece textpaths şekilleri kabul olsaydı önemli olurdu. Ama daire gibi şekil unsurları teknik olarak bir "" nokta. başlangıç olmadığından bu çözüm kaçınıyorlar sanırım

jsfiddle demo: http://jsfiddle.net/crazytonyi/mNt2g/

Güncelleme:

Kullanıyorsanız, yolu için bir textPath referans ve isteyen metin oluşturma üzerinde dış kenarında ark, kullanırsınız aynı yöntem ama değiştirmek süpürme-bayrak, 0, 1, böylece davranır dışına çıkın yol yüzeyi yerine, iç (sanırım ** 16 yaşında gibi biri oturuşta merkezi ve çizim bir daire etrafında kendilerini, süre 1,1 gibi biri dolaşıyor Merkezi'nde yarıçap mesafe ve sürükleyerek kendi tebeşir yanında onlara, eğer herhangi bir yardım). İşte bu değişiklik ile yukarıdaki gibi ama: kodu

<path 
    d="
    M cx cy
    m -r, 0
    a r,r 0 1,1 (r * 2),0
    a r,r 0 1,1 -(r * 2),0
    "
/>

Bunu PaylaÅŸ:
  • Google+
  • E-Posta
Etiketler:
SvgGeometriGeometryÇizimDrawingVmlGeometrik-ArcGeometric-arc

AYNI ETÄ°KETTEKÄ° VÄ°DEOLAR

YORUMLAR

SPONSOR VÄ°DEO

Rastgele Yazarlar

  • Chanre Joubert

    Chanre Joube

    27 Temmuz 2012
  • Kanaal van Dj0fifty

    Kanaal van D

    28 EKÄ°M 2011
  • Migs351

    Migs351

    3 HAZÄ°RAN 2007

Ä°LGÄ°LÄ° SORU / CEVAPLAR

Ä°LGÄ°LÄ° BAÄžLANTILAR