SORU
20 NİSAN 2011, ÇARŞAMBA


Nasıl bir yay (daire)için SVG Yolu hesaplamak için

Bir daire (200,200), 25, nasıl 135 270 derecelik bir kavis çizin 45 270 gider o derece ve bir dereceye muyum? radius merkezli verildi

Derece doğru olduğu anlamına gelir 0, x-ekseni (sağ taraf) (yani 3 saat pozisyonu). 270 derece saat 12 yönünde pozisyon olduğu anlamına gelir, ve 90 saat 6 pozisyonu demektir

Daha genel olarak, ne ile Bir çemberin bir parçası için bir yay için bir yoldur

x, y, r, d1, d2, direction

anlam

center (x,y), radius r, degree_start, degree_end, direction

CEVAP
27 AĞUSTOS 2013, Salı


@Wdebeaum büyük cevap genişleyen, burada yay biçimli bir yol oluşturmak için bir yöntem

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 arcSweep = endAngle - startAngle <= 180 ? "0" : "1";

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

    return d;       
}

kullanmak için

document.getElementById("arc1").setAttribute("d", describeArc(200, 400, 100, 0, 180));

ve html

<path id="arc1" fill="none" stroke="#446688" stroke-width="20" />

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

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Elly Awesome

    Elly Awesome

    15 ŞUBAT 2010
  • NYLON Video

    NYLON Video

    11 Aralık 2006
  • Ryan Billy

    Ryan Billy

    30 EKİM 2006