Любой гуру RaphaelJS знает, как нарисовать это изображение? - PullRequest
Новая
       0

Любой гуру RaphaelJS знает, как нарисовать это изображение?

3 голосов
/ 13 апреля 2011

Любой Рафаэль Дж.С. Гуру (или любой гений, который не знает Рафаэля Дж.С.) знает, как просто нарисовать это?

enter image description here

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

1 Ответ

11 голосов
/ 13 апреля 2011

Первый подход с использованием команды 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 });
...