raphael - 任何 RaphaelJS Guru 都知道如何绘制此图像？

Question

任意 Raphael JS大师(或任何不了解 Raphael JS 的天才)知道如何简单地绘制这个？



纯黄色是圆圈部分的 4.2/10。

Answer 1

使用 svg 的椭圆弧曲线命令的第一种方法

演示:http://jsbin.com/iwuqe3/edit

Raphael.fn.zeroToTenArc = function (x, y, r, value) {

  var set = this.set();
  var pi = Math.PI;
  var cos = Math.cos;
  var sin = Math.sin;
  var maxValue = 10;
  var t = (pi/2) * 3; //translate
  var rad = (pi*2 * (maxValue-value)) / maxValue + t;
  var colors = ["#F79518", "#FCE6BF", "#FFF"];

  set.push(this.circle(x, y, r).attr({ fill : colors[+!value], stroke : 0 }));

  var p = [
    "M", x, y,
    "l", r * cos(t), r * sin(t),
    "A", r, r, 0, +(rad > pi + t), 1, x + r * cos(rad), y + r * sin(rad), 
    "z"
  ];

  set.push(this.path(p).attr({ fill : colors[1], stroke : 0 }));


  set.push(this.circle(x, y, r*0.7).attr({ fill : colors[2], stroke : 0 }));

  return set;
};

var canvas = Raphael("hello", 300, 300);
var arc = canvas.zeroToTenArc(150, 150, 30, 4.2);

.

第二种方法使用(很多)svg 的 lineto 命令

演示: http://jsbin.com/usotu5/edit

Raphael.fn.zeroToTenArc = function (x, y, radius, value) {
  var angle = 0;
  var endAngle = (value*360)/10;
  var path = "";
  var clockwise = -1;
  var translate = Math.PI/2;

  while(angle <= endAngle) {

    var radians= (angle/180) * Math.PI + translate;
    var cx = x + Math.cos(radians) * radius;
    var cy = y + Math.sin(radians) * radius * clockwise;

    path += (angle === 0) ? "M" : "L";
    path += [cx,cy];
    angle += 1;
  }

  return this.path(path);
};

var canvas = Raphael("hello", 200, 200);

canvas.zeroToTenArc(50, 50, 30, 10).attr({ stroke : "#FCE6BF", "stroke-width" : 12 });
canvas.zeroToTenArc(50, 50, 30, 4.2).attr({ stroke : "#F79518", "stroke-width" : 12 });