饼图的线性梯度计算答案

【问题标题】：linear gradient calculation for pie slices饼图的线性梯度计算
【发布时间】：2015-02-08 16:24:50
【问题描述】：

我们正在渲染 64 个饼图，并希望每个饼图的中间有一个完美的线性渐变。

如果我将 SVG 复制到 illustrator，现在看起来像这样，因为您可以看到渐变在蓝色突出显示的图片中没有完全对齐：

我们需要的是更精确地计算像这样的部分。

这是我们目前使用的代码。我们需要的是计算梯度角度，使梯度更对齐中心

var total=64
  , center_x=options.center_x
  , center_y=options.center_y
  , radie=options.radie
  , val = 360 / total;

for (var i=0; total>=i; i++) {
    var start=val*i
      , gradientAngle=val*(total-i)
      , angle = (start + val % 360) * Math.PI / 180;

   renderPiePiece(center_x, center_y, radie, start, start+val, gradientAngle);
}

function renderPiePiece(center_x, center_y, radie, start_angle, end_angle, gradientAngle) {
    var flag = (end_angle - start_angle) > 180;
    start_angle = (start_angle % 360) * Math.PI / 180;
    end_angle = (end_angle % 360) * Math.PI / 180;

    this.paper
        .path(
            ["M", center_x, center_y,
            "l", radie * Math.cos(start_angle), radie * Math.sin(start_angle), 
            "A", radie, radie, 0, +flag, 1, center_x + radie * Math.cos(end_angle), center_y + radie * Math.sin(end_angle), 
            "z"]
        ).attr({
            stroke:'black',
            "stroke-width":1,
            fill:gradientAngle+'-#fff:0-#000'
        });
    }

这是另一个示例，它现在的样子。如您所见，渐变不是从中心完美的。

这里是脚本的链接： http://jsbin.com/bakinikadi/1/edit?html,css,js,output

【问题讨论】：

标签： javascript svg raphael

【解决方案1】：

不是一个大解决方案，而是解决问题的更多方法。

使梯度为零的所有部分，然后旋转它们。

var total=30;
var center_x=200;
var center_y=200;
var radie=200;
var val = 360 / total;
for (var i=0; total>=i; i++) {
  var start=val*(total-0.5);
  rot = (val*0.5)+(i*val)
  renderPiePiece(center_x, center_y, radie, start, val*0.5, 0, rot);
}
function renderPiePiece(center_x, center_y, radie, start_angle, end_angle, gradientAngle, rotation) {
  var flag = (end_angle - start_angle) > 180;
  start_angle = (start_angle % 360) * Math.PI / 180;
  end_angle = (end_angle % 360) * Math.PI / 180;
  paper
    .path(
      ["M", center_x, center_y,
        "l", radie * Math.cos(start_angle), radie * Math.sin(start_angle), 
        "A", radie, radie, 0, +flag, 1, center_x + radie * Math.cos(end_angle), center_y + radie * Math.sin(end_angle), 
        "Z"]
    ).attr({
      stroke:'black',
      "stroke-width":1,
      fill:gradientAngle+'-#fff-#000'
    }).transform("r"+rotation+","+center_x+","+center_y);
}

http://jsfiddle.net/crockz/jtfkadmy/

【讨论】：