javascript - Raphael.js - 如何在 donut 扇区中使用弯曲标签制作饼图 donut 样式

Question

我想制作一个 donut 风格的饼图，在特定的 donut 扇区带有弯曲的标签，就像这个:

在此模型中，用户单击了“Raphael.js”扇区。现在对于单击的扇区，还应该有一个事件处理程序，负责在饼图下方显示一个新的 HTML Div 并显示一些信息。完美的解决方案是，如果 donut 旋转，使点击的扇区位于底部。

有人可以帮忙吗？

Answer 1

下面是一些沿着路径创建文本的代码。它并不完美，但它会让你走得足够远，可以为你自己的项目指定。

var paper = Raphael(0, 0, '100%', '100%'),
    r = 200,
    path = paper.path("M100,50a" + r + "," + r + " 0 0,1 " + r + "," + r).attr({ stroke: "#000", 'stroke-width': '40px'}),
    message = "Raphael.js",
    message_length = 0,
    letters = [],
    places = [],
    ratio,
    fontsize,                                                
    letter,
    c = 0,
    p;


//since not every letter is the same width, get the placement for each letter along the length of the string
//however, Raphael appears to group the width of letters into intervals of 4px, so this won't be perfect        
for (; c < message.length; c += 1) {
    letter = paper.text(0, 0, message[c]).attr({"text-anchor" : "start"}).attr({fill: '#FFF'});
    letters.push(letter);
    places.push(message_length);
    //spaces get a width of 0, so set min at 4px
    message_length += Math.max(4, letter.getBBox().width);
}

ratio = path.getTotalLength() / message_length;
fontsize = 8 * ratio;

for (c = 0; c < letters.length; c += 1) {
    letters[c].attr("font-size", fontsize + "px"); 
    p = path.getPointAtLength(places[c] * ratio);
    //there does appear to be a bug in p.alpha around 180. Here's the fix
    letters[c].attr({ x: p.x, y: p.y, transform: 'r' + (p.alpha < 180 ? p.alpha + 180 : p.alpha)});
}

jsFiddle

至于其他的东西，你需要先自己努力，如果碰壁了就提出具体的问题。