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

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

введите здесь описание изображения

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


person nonopolarity    schedule 13.04.2011    source источник


Ответы (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 });
person basecode    schedule 13.04.2011
comment
как насчет текста, вы используете что-то вроде var t = paper.text(50, 50, 4.2).attr({fill: "#f00", "font-size" : "15px"}); для этого? Я не был уверен, что использовать для установки цвета. Если я использую stroke, это дает мне 2 цвета, один поверх другого. (черный поверх нужного мне цвета). - person nonopolarity; 13.04.2011
comment
Кроме того, есть два размера, один большой и один маленький, а маленький должен содержаться в 50 x 50 div, поэтому я использовал радиус 22 и ширину штриха 6, и края выглядят несколько прочный... Я думаю, это результат отсутствия сглаживания? (также потому, что это более сильный цвет по сравнению с белым фоном) Есть ли способ сделать его более гладким? Мой пример: jsbin.com/usotu5/3/edit. - person nonopolarity; 13.04.2011
comment
+ я добавил ваш текст в демо. идеально подходит имхо. jsbin.com/usotu5/4/edit + сглаживание может быть проблемой. сори, понятия не имею. подводные камни существуют в зависимости от вашего браузера + платформы. например, в хроме на окнах есть ошибка с цветом обводки. - person basecode; 13.04.2011
comment
может быть, метод circle лучше справляется со сглаживанием... поэтому SVG не имеет возможности красиво нарисовать дугу, но нужно полагаться на серию Move to и Line to? (много их!) - person nonopolarity; 14.04.2011
comment
ты прав. в настоящее время это своего рода быстрый и грязный взлом, поэтому я придумал новый подход, основанный на методе дуги svg. не могли бы вы проверить это? для меня это выглядит хорошо на Mac/Chrome. jsbin.com/iwuqe3/edit - person basecode; 18.04.2011
comment
Я попробовал первый, который вы добавили в IE 7, и он показывает мигающий курсор... нет круга... так это только для SVG, а не для VML? Рафаэль может поддерживать что-то конкретное для SVG, но не для VML? - person nonopolarity; 19.04.2011
comment
мигающий курсор не имеет для меня смысла. какие-либо сообщения об ошибках? я протестировал код на IE6/8/9*, и он работает. *) к сожалению, не в IE7 - person basecode; 20.04.2011