Zeichnen zentriert Bögen in Raphael js

Hier ist, wie ich es getan haben. Der folgende code ermöglicht Ihnen die Angabe eines start-und end-Winkel sowie einem inneren und äußeren radius (nützlich für diese trendy donut-Stil pie-charts). Die Lösung verlässt sich nicht auf die approximation einer Kurve durch Liniensegmente und animiert werden können wie pro die Uhr Beispiel erwähnt, in der ursprünglichen Frage.

Zuerst erstellen Sie Ihre Raphael-Zeichenfläche; im folgenden wird davon ausgegangen ein div mit der id "raphael_paper" in Ihrer HTML-Datei:

var paper = Raphael("raphael_paper", 800, 800);

dieser Raphael-Objekt fügen wir eine benutzerdefinierte arc Attribut, eine Funktion, die den Mittelpunkt eines Kreises (x-und y-Koords), Anfangswinkel, Endwinkel, einem inneren radius und einem äusseren radius:

paper.customAttributes.arc = function (centerX, centerY, startAngle, endAngle, innerR, outerR) {
    var radians = Math.PI /180,
        largeArc = +(endAngle - startAngle > 180);
        //calculate the start and end points for both inner and outer edges of the arc segment
        //the -90s are about starting the angle measurement from the top get rid of these if this doesn't suit your needs
        outerX1 = centerX + outerR * Math.cos((startAngle-90) * radians),
        outerY1 = centerY + outerR * Math.sin((startAngle-90) * radians),
        outerX2 = centerX + outerR * Math.cos((endAngle-90) * radians),
        outerY2 = centerY + outerR * Math.sin((endAngle-90) * radians),
        innerX1 = centerX + innerR * Math.cos((endAngle-90) * radians),
        innerY1 = centerY + innerR * Math.sin((endAngle-90) * radians),
        innerX2 = centerX + innerR * Math.cos((startAngle-90) * radians),
        innerY2 = centerY + innerR * Math.sin((startAngle-90) * radians);

    //build the path array
    var path = [
        ["M", outerX1, outerY1], //move to the start point
        ["A", outerR, outerR, 0, largeArc, 1, outerX2, outerY2], //draw the outer edge of the arc
        ["L", innerX1, innerY1], //draw a line inwards to the start of the inner edge of the arc
        ["A", innerR, innerR, 0, largeArc, 0, innerX2, innerY2], //draw the inner arc
        ["z"] //close the path
    ];                   
    return {path: path};
};

nun können wir mit diesem Werkzeug zeichnen Bögen einer bestimmten Dicke, Start-und Ende-wo immer wir möchten, dass Sie zB.

var redParams = {stroke: "#f00", "stroke-width": 1, fill:"#eee"},
    greenParams = {stroke: "#0f0", "stroke-width": 1, fill:"#eee"},
    blueParams = {stroke: "#00f", "stroke-width": 1, fill:"#eee"},
    cx = 300, cy = 300, innerRadius = 100, outerRadius = 250,

var red = paper.path().attr(redParams).attr({arc: [cx, cy, 0, 90, innerRadius, outerRadius]}); 
var green = paper.path().attr(greenParams).attr({arc: [cx, cy, 270, 320, innerRadius, outerRadius]}); 
var blue = paper.path().attr(blueParams).attr({arc: [cx, cy, 95, 220, innerRadius, outerRadius]});

Sollte dies die drei grauen Kreissegmente mit rot, blau und grün 1px Grenzen.

InformationsquelleAutor der Antwort Tom P

Einfach zu entfernen, einige Annahmen aus dem user592699 Antwort, dies ist der komplette code, der funktioniert:

<script src="raphael.js"></script>
<script>

  var paper = Raphael(20, 20, 320, 320);

  function arc(center, radius, startAngle, endAngle) {
      angle = startAngle;
      coords = toCoords(center, radius, angle);
      path = "M " + coords[0] + " " + coords[1];
      while(angle<=endAngle) {
          coords = toCoords(center, radius, angle);
          path += " L " + coords[0] + " " + coords[1];
          angle += 1;
      }
      return path;
  }

  function toCoords(center, radius, angle) {
      var radians = (angle/180) * Math.PI;
      var x = center[0] + Math.cos(radians) * radius;
      var y = center[1] + Math.sin(radians) * radius;
      return [x, y];
  }

  paper.path(arc([100, 100], 80, 0, 270));  //draw an arc 
                                            //centered at (100, 100),
                                            //radius 80, starting at degree 0,
                                            //beginning at coordinate (80, 0)
                                            //  which is relative to the center
                                            //  of the circle,
                                            //going clockwise, until 270 degree

</script>

InformationsquelleAutor der Antwort 太極者無極而生

Können Sie dies auch tun, ohne Verwendung von Schleifen. Die folgenden erreicht dies und arbeitet mit negativen Winkeln.

Pass in einer Raphael-Objekt als r. Die Winkel beginnen mit 0 Grad, das ist die Spitze des Kreises, anstatt rechts, wie es aufgeführt wurde, in ein paar andere Lösungen.

        function drawArc(r, centerX, centerY, radius, startAngle, endAngle) {
            var startX = centerX+radius*Math.cos((90-startAngle)*Math.PI/180); 
            var startY = centerY-radius*Math.sin((90-startAngle)*Math.PI/180);
            var endX = centerX+radius*Math.cos((90-endAngle)*Math.PI/180); 
            var endY = centerY-radius*Math.sin((90-endAngle)*Math.PI/180);
            var flg1 = 0;

            if (startAngle>endAngle)
                flg1 = 1;
            else if (startAngle<180 && endAngle<180)
                flg1 = 0;
            else if (startAngle>180 && endAngle>180)
                flg1 = 0;
            else if (startAngle<180 && endAngle>180)
                flg1 = 0; //edited for bugfix here, previously this was 1
            else if (startAngle>180 && endAngle<180)
                flg1 = 1;

            return r.path([['M',startX, startY],['A',radius,radius,0,flg1,1,endX,endY]]);
        };

InformationsquelleAutor der Antwort rchawdry