Question

我正在尝试填充圆圈的边框，具体取决于变量，如下所示：

enter image description here

我找到了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

我觉得你搞砸了cos和罪恶的东西:)。基本上，弧的起点可以根据比率（xloc-R * sin（a），yloc + R * cos（a））而变化，并且宽度也是可变的（2 * R * sin（a））。

我修改了你的东西：

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) {
        var alpha = 360 / total * value,
            a = value / total * Math.PI,
            w = R * Math.sin(a),
            h = R * Math.cos(a),
            x = xloc - R * Math.sin(a),
            y = yloc + R * Math.cos(a),
            path;

        if (total == value) {
            path = [
                ["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]
            ];
        }
        return {
            path: path
        };
    };

    // inner ring
    var circle = archtype.circle(100, 100, 50).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, 55]
    }, 1000);
}

请参阅：http://jsfiddle.net/Xp77x/1/

但是我使用了绝对坐标。要获得相对坐标，您需要解析％的输入并将其转换为0-100画布。

Answer 2

看起来Raphael没有中风结束的设置。因此，另一种方法是使用两个弧并填充它们之间的空间以模拟笔划。

这涉及更多几何:)但这应该有效：

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/

用Raphael JS填充外圈

2 个答案: