javascript - 用 Raphael JS 填充外圆

Question

我正在尝试根据变量填充圆的边界，如下所示:

我找到了 this example但这不是我想要的。我希望外边框在圆的两侧自下而上填充。

这是我的代码:

var completion = '5%';

drawcircle("js-raphael-completion", completion);

function drawcircle(div, rate) {
  var archtype = Raphael(document.getElementsByClassName(div)[0], "90%", "90%");
  archtype.customAttributes.arc = function (xloc, yloc, value, total, R) {
    var alpha = 360 / total * value,
        a = (90 - alpha) * Math.PI / 180,
        x = xloc + R * Math.cos(a),
        y = yloc - R * Math.sin(a),
        path;
    if (total == value) {
      path = [
          ["M", xloc, yloc - R],
          ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
      ];
    } else {
      path = [
          ["M", xloc, yloc - R],
          ["A", R, R, 0, +(alpha > 180), 1, x, y]
      ];
    }
    return {
       path: path
    };
  };

  // inner ring
  var circle = archtype.circle("50%", "50%", "40%").attr({
      "stroke": "#2787d3",
      "stroke-width": 1
  });

  // text
  var text = archtype.text("95%", "50%", rate).attr({
      'font-size': 14, 'font-family': 'Avenir',
      "fill": "#2787d3"
  });

  // outer ring (filling)
  var my_arc = archtype.path().attr({
      "stroke": "#2787d3",
      "stroke-width": 10,
      arc: [100, 100, 0, 100, 50]
  });

  // animation of outer ring
  my_arc.animate({
     arc: [100, 100, 100, 100, 50]
  }, 1000);
}

查看演示:http://jsfiddle.net/SUBn6/

目前，因为我没有对外圈(填充)使用百分比，所以它不以边框圆(内圈)为中心。

我遇到的另一个问题是数字“5%”。它需要跟随外环(填充)，因为它从下到上填充......

有什么想法吗？谢谢。

Answer 1

拉斐尔好像没有这样的笔划结尾设置。所以另一种方法是有两个弧并填充它们之间的空间来模拟笔画。

这涉及到更多的几何 :) 但这应该可行:

var completion = '5%';

drawcircle("js-raphael-completion", completion);

// JSFiddle needs not onload
// window.onload = function () {
//  drawcircle("js-raphael-completion", completion);
// };

function drawcircle(div, rate) {
    var archtype = Raphael(document.getElementsByClassName(div)[0], "90%", "90%");
    archtype.customAttributes.arc = function (xloc, yloc, value, total, R,lineWidth) {
        var alpha = 360 / total * value,
            a = value / total * Math.PI,
            w = R * Math.sin(a),
            h = R * Math.cos(a),
            gamma = Math.asin(R / (R + lineWidth) * Math.sin(Math.PI / 2 + a)),
            beta = Math.PI/2 - a - gamma,

            xOffset = (R + lineWidth) * Math.sin(beta) / Math.sin(Math.PI / 2 + a),
            x = xloc - R * Math.sin(a),
            y = yloc + R * Math.cos(a),
            path;

        if (Math.abs(a - Math.PI/2) < 0.0001) {
            xOffset = lineWidth;
        }

        if (total == value) {
            path = [
                ["M", x, y],
                ["A", R , R , 1, 1, 1, x - 0.01, y],
                ["L", x - 0.01,y-lineWidth],
                ["A", R + lineWidth, R + lineWidth, 1, 1, 0, x, y - lineWidth],
                ["Z"]

                /*
                ["M", xloc, yloc - R],
                ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
                */
            ];
        } else {
            path = [
                ["M", x, y],
                ["A", R , R , 0, +(alpha > 180), 0, x + 2 * w, y],
                ["L", x+ 2 * w + xOffset,y],
                ["A", R + lineWidth, R + lineWidth, 0 , +(alpha > 180) , 1, x - xOffset, y],
                ["Z"]
            ];
        }
        return {
            path: path
        };
    };

    // inner ring
    var circle = archtype.circle(100, 100, 50).attr({
        "stroke": "#2787d3",
            "stroke-width": 3
    });

    // text
    var text = archtype.text("95%", "50%", rate).attr({
        'font-size': 14,
        'font-family': 'Avenir',
            "fill": "#2787d3"
    });

    // outer ring (filling)
    var my_arc = archtype.path().attr({
        "stroke": "#FF0000",
        "fill":  "#2787d3",
        "stroke-width" : 0,
        arc: [100, 100, 0, 100, 51,10]
    });

    // animation of outer ring
    my_arc.animate({
        arc: [100, 100, 100, 100, 51,10]
    }, 1000);

}

参见 http://jsfiddle.net/Xp77x/2/