Блог

Любой гуру Raphael JS (или любой гений, который не знает Raphael JS) знает, как просто нарисовать это?

сплошной желтый цвет составляет 4,2 / 10 части круга.

Первый подход с использованием команды svg elliptical arc curve

Демо: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);
  

.

Второй подход, использующий (много) команд lineto svg

Демо: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 });