Question

正如你在这里看到的那样：http://jsfiddle.net/Da7SP/60/我有64个馅饼，我想要从中间到边缘有一个径向渐变。（每件作品都会有不同的颜色），但我没有成功创造出那种效果。

以下是代码：

var canvas = window._canvas = new fabric.Canvas('c');

var x=300
, y=300
, totalGates=64
, start=0
, radius=200
, val = 360 / totalGates;

for (var i = 0; i < totalGates; i++) {
  createPath(x, y, radius, val*i, (val*i)+val);
}

function createPath (x, y, radius, startAngle, endAngle) {
    var flag = (endAngle - startAngle) > 180;
        startAngle = (startAngle % 360) * Math.PI / 180;
        endAngle = (endAngle % 360) * Math.PI / 180;

        var path = 'M '+x+' '+y+' l ' + radius * Math.cos(startAngle) + ' ' + radius * Math.sin(startAngle) + 
            ' A ' + radius + ' ' + radius + ' 0 ' + (+flag) + ' 1 ' + (x + radius * Math.cos(endAngle))+ ' ' + (y + radius * Math.sin(endAngle)) + ' z';
    var piePiece = new fabric.Path(path);
        piePiece.set({
         strokeWidth:0
     });

    piePiece.setGradient('fill', {
        type:'radial',
        x1: x,
        y1: y,
        //x2: x + radius * Math.cos(endAngle),
        //y2: y + radius * Math.sin(endAngle),
        r1: radius, 
        r2: 0,
        colorStops: {           
            0: '#000',
            1: '#fff',
        }
    });
    canvas.add(piePiece);
}

我认为将x1设置为x并将y1设置为y以定义中间和半径的坐标就足够了（之前我使用PathGroup进行操作）。但现在当我将路径添加到一个组或直接添加到画布时，渐变看起来完全不同。

那么，我如何使用带有径向渐变的setGradient，这样它就会显示为完整的饼是圆形，它会从中心到边缘

更新：我注意到如果我设置x = 0和y = 0，那么渐变就会居中。

UPDATE2：如果x1和y2都设置为0，则从左上角绘制渐变，这使得渐变在90度右下角看起来很好：http://jsfiddle.net/Da7SP/61/

UPDATE3：我解决了！这里http://jsfiddle.net/Da7SP/64/对于有相同问题的小提琴，下面你会看到结果和代码。

这就是诀窍：

x1: x > Math.round(piePiece.left) ? x - piePiece.left : 0,
y1: y > Math.round(piePiece.top) ? y - piePiece.top : 0,
x2: x > Math.round(piePiece.left) ? x - piePiece.left : 0,
y2: y > Math.round(piePiece.top) ? y - piePiece.top : 0,

以下是预期结果：

这是代码

var canvas = window._canvas = new fabric.Canvas('c');

var x=300
, y=300
, totalGates=64
, start=0
, radius=200
, val = 360 / totalGates;

            /* Loops through each gate and prints selected options */
for (var i = 0; i < totalGates; i++) {
  createPath(x, y, radius, val*i, (val*i)+val, i);
}

function createPath (x, y, radius, startAngle, endAngle,i ) {
var flag = (endAngle - startAngle) > 180;
        startAngle = (startAngle % 360) * Math.PI / 180;
        endAngle = (endAngle % 360) * Math.PI / 180;

        var path = 'M '+x+' '+y+' l ' + radius * Math.cos(startAngle) + ' ' + radius * Math.sin(startAngle) + 
            ' A ' + radius + ' ' + radius + ' 0 ' + (+flag) + ' 1 ' + (x + radius * Math.cos(endAngle))+ ' ' + (y + radius * Math.sin(endAngle)) + ' z';
        var piePiece = new fabric.Path(path);
    piePiece.set({
    strokeWidth:0
    });

        piePiece.setGradient('fill', {
            type:'radial',
            x1: x > Math.round(piePiece.left) ? x - piePiece.left : 0,
            y1: y > Math.round(piePiece.top) ? y - piePiece.top : 0,
            x2: x > Math.round(piePiece.left) ? x - piePiece.left : 0,
            y2: y > Math.round(piePiece.top) ? y - piePiece.top : 0,
            r1: radius, 
            r2: 0,
            colorStops: {           
                0: '#000',
                1: '#f0f',
            }
        });
    canvas.add(piePiece);
}

Answer 1

以下是缺少的代码：

   piePiece.setGradient('fill', {
        type:'radial',
        x1: x > Math.round(piePiece.left) ? x - piePiece.left : 0,
        y1: y > Math.round(piePiece.top) ? y - piePiece.top : 0,
        x2: x > Math.round(piePiece.left) ? x - piePiece.left : 0,
        y2: y > Math.round(piePiece.top) ? y - piePiece.top : 0,
        r1: radius, 
        r2: 0,
        colorStops: {           
            0: '#000',
            1: '#f0f',
        }
    });

FabricJs - 饼图的径向渐变

1 个答案: