SVG'nin yay yolu ile daire çizimi

Kısa soru: SVG yolunu kullanarak bir çemberin% 99,99'unu çizebiliriz ve bu ortaya çıkar, ancak çemberin% 99,999999999'u olduğunda, çember görünmez. Nasıl düzeltilebilir?

Aşağıdaki SVG yolu bir dairenin% 99,99'unu çizebilir: ( http://jsfiddle.net/DFhUF/1381/ adresinde deneyin ve 4 yay mı yoksa yalnızca 2 yay mı gördüğünüze bakın, ancak IE ise SVG'de değil, VML'de oluşturulmuş, ancak benzer bir sorunu var)

M 100 100 a 50 50 0 1 0 0.00001 0

Ancak bir dairenin% 99,99999999'u olduğunda, hiçbir şey görünmeyecek mi?

M 100 100 a 50 50 0 1 0 0.00000001 0    

Ve bu bir çemberin% 100'ü için de aynıdır (bu hala bir yay, değil mi, sadece tam bir yay)

M 100 100 a 50 50 0 1 0 0 0 

Bu nasıl düzeltilebilir? Bunun nedeni, bir yayın yüzdesi çizmek için bir işlev kullanmam ve çember işlevini kullanmak için% 99,9999 veya% 100 yayı "özel duruma" ihtiyacım olursa, bu biraz saçma olur.

Yine, RaphaelJS kullanan jsfiddle üzerinde bir test durumu http://jsfiddle.net/DFhUF/1381/ adresindedir
(ve eğer IE 8'de VML ise, ikinci daire bile gösterilmeyecektir ... olarak değiştirmelisiniz. 0.01)

Güncelleme:

Bunun nedeni, sistemimizdeki bir puan için bir yay çiziyor olmam, yani 3.3 puan bir çemberin 1 / 3'ünü alıyor. 0.5 yarım daire alır ve 9.9 puan bir dairenin% 99'unu alır. Peki ya sistemimizde 9,99 puan varsa? Bir dairenin% 99,999'una yakın olup olmadığını kontrol etmeli ve buna göre bir arcişlev veya işlev kullanmalı circlemıyım? Peki ya 9,9987 puan? Hangisini kullanmalı? Ne tür puanların "çok tam bir daire" ile eşleneceğini ve bir daire işlevine geçeceğini bilmek ve bir çemberin "belirli bir% 99,9'u" veya bir 9,9987 puan olduğunda yay işlevini kullanmak gülünçtür .

XAML'nin yayı için aynı. % 99,99 yayı bir ile kapatın ve Zbir daire elde edin!

Oyunda biraz geç olduğunu biliyorum, ancak bu soruyu yeni olduğu zamanlardan hatırladım ve benzer bir ikilem yaşadım ve biri hala bir tane arıyorsanız, yanlışlıkla "doğru" çözümü buldum:

<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
    "
/>

Başka bir deyişle, bu:

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

bununla bir yol 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
        "
  />

İşin püf noktası, iki yaya sahip olmaktır, ikincisi ilkinin kaldığı yerden devam eder ve orijinal yay başlangıç ​​noktasına geri dönmek için negatif çapı kullanır.

Tek bir yayda tam bir daire olarak yapılamamasının nedeni (ve ben sadece spekülasyon yapıyorum), ona kendisinden (diyelim ki 150,150) kendisine (150,150) bir yay çizmesini söylemenizdir. "oh, ben zaten oradayım, ark gerekmiyor!" gibi.

Sunduğum çözümün faydaları:

1. bir çemberden doğrudan bir yola çevirmek kolaydır ve
2. iki yay çizgisinde örtüşme yoktur (işaretçiler veya desenler vb. kullanıyorsanız sorunlara neden olabilir). İki parça halinde çizilmiş de olsa temiz ve kesintisiz bir çizgidir.

Metin yollarının şekilleri kabul etmesine izin verselerdi bunların hiçbiri önemli değildir. Ama bence bu çözümden kaçınıyorlar çünkü daire gibi şekil öğelerinin teknik olarak bir "başlangıç" noktası yok.

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

Güncelleme:

Yolu bir textPathreferans için kullanıyorsanız ve metnin yayın dış kenarında oluşturulmasını istiyorsanız, aynı yöntemi kullanırsınız, ancak süpürme bayrağını 0'dan 1'e değiştirir, böylece yolun dışını ele alırsınız. içten çok yüzey olarak yol ( 1,0merkezde oturan ve kendi etrafında bir daire çizen 1,1biri olarak, merkezin etrafında yarıçap mesafesinde yürüyen ve tebeşirlerini yanlarında sürükleyen biri olarak düşünün , eğer yardımı olacaksa). Kod yukarıdaki gibi ancak değişiklikle birlikte:

<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
    "
/>

Anthony'nin çözümüne referans olarak, yolu elde etmek için bir fonksiyon:

function circlePath(cx, cy, r){
    return 'M '+cx+' '+cy+' m -'+r+', 0 a '+r+','+r+' 0 1,0 '+(r*2)+',0 a '+r+','+r+' 0 1,0 -'+(r*2)+',0';
}

Tamamen farklı bir yaklaşım:

Svg'de bir yay belirlemek için yollarla uğraşmak yerine, sözde kodda bir daire öğesi alabilir ve bir çizgi-çizgi dizisi belirtebilirsiniz:

with $score between 0..1, and pi = 3.141592653589793238

$length = $score * 2 * pi * $r
$max = 7 * $r  (i.e. well above 2*pi*r)

<circle r="$r" stroke-dasharray="$length $max" />

Basitliği, çoklu yay yolu yöntemine göre temel avantajdır (örneğin, komut dosyası oluştururken yalnızca bir değer girersiniz ve herhangi bir yay uzunluğu için işiniz biter)

Yay, en sağ noktadan başlar ve döndürme dönüşümü kullanılarak kaydırılabilir.

Not: Firefox'ta 90 derece veya daha fazla dönmenin göz ardı edildiği garip bir hata vardır. Yayı yukarıdan başlatmak için şunu kullanın:

<circle r="$r" transform="rotate(-89.9)" stroke-dasharray="$length $max" />

Adobe Illustrator, SVG gibi bezier eğrilerini kullanır ve daireler için dört nokta oluşturur. İki eliptik yay komutuyla bir daire oluşturabilirsiniz ... ancak SVG'deki bir daire için bir <circle />:)

Tam bir daire çizmek için iki yay komutunun kullanılması iyi bir fikirdir.

genellikle tam bir daire çizmek için elips veya daire elemanı kullanırım.

Anthony ve Anton'un yanıtlarına dayanarak, oluşturulan daireyi genel görünümünü etkilemeden döndürme yeteneğini dahil ettim. Bu, bir animasyon için yolu kullanıyorsanız ve nerede başladığını kontrol etmeniz gerekiyorsa yararlıdır.

function(cx, cy, r, deg){
    var theta = deg*Math.PI/180,
        dx = r*Math.cos(theta),
        dy = -r*Math.sin(theta);
    return "M "+cx+" "+cy+"m "+dx+","+dy+"a "+r+","+r+" 0 1,0 "+-2*dx+","+-2*dy+"a "+r+","+r+" 0 1,0 "+2*dx+","+2*dy;
}

Bir fonksiyon olarak yazıldığında şuna benzer:

function getPath(cx,cy,r){
  return "M" + cx + "," + cy + "m" + (-r) + ",0a" + r + "," + r + " 0 1,0 " + (r * 2) + ",0a" + r + "," + r + " 0 1,0 " + (-r * 2) + ",0";
}

Yol dönüşümü için elips öznitelikleri arayan benim gibi olanlar için:

const ellipseAttrsToPath = (rx,cx,ry,cy) =>
`M${cx-rx},${cy}a${rx},${ry} 0 1,0 ${rx*2},0a${rx},${ry} 0 1,0 -${rx*2},0`

burada yapmak için bir jsfiddle yaptım:

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}

function describeArc(x, y, radius, startAngle, endAngle){

var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);

var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

var d = [
    "M", start.x, start.y, 
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
].join(" ");

return d;       
}
console.log(describeArc(255,255,220,134,136))

bağlantı

Tek yapmanız gereken, console.log girişini değiştirmek ve sonucu console'da almaktır.

Bu cevaplar çok fazla karmaşık.

Bunu iki yay oluşturmadan veya farklı koordinat sistemlerine dönüştürmeden yapmanın daha basit bir yolu ..

Bu, tuval alanınızın genişliğe wve yüksekliğe sahip olduğunu varsayar h.

`M${w*0.5 + radius},${h*0.5}
 A${radius} ${radius} 0 1 0 ${w*0.5 + radius} ${h*0.5001}`

Sadece "uzun yay" bayrağını kullanın, böylece tam bayrak doldurulur. Ardından yayları% 99,9999 tam daire yapın. Görsel olarak aynı. Süpürme bayrağını, daireyi dairenin en sağ noktasından (merkezden doğrudan yatay bir yarıçap) başlayarak önleyin.

Başka bir yol, iki Kübik Bezier Eğrisi kullanmaktır. Bu , svg arc parametresini tanımayan pocketSVG kullanan iOS kullanıcıları içindir .

C x1 y1, x2 y2, xy (veya c dx1 dy1, dx2 dy2, dx dy)

Buradaki son koordinat kümesi (x, y), çizginin bitmesini istediğiniz yerdir. Diğer ikisi kontrol noktalarıdır. (x1, y1) eğrinizin başlangıcı için kontrol noktası ve (x2, y2) eğrinizin bitiş noktasıdır.

<path d="M25,0 C60,0, 60,50, 25,50 C-10,50, -10,0, 25,0" />