FabricJs - 円グラフの放射グラデーション

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); 
} 

私はパスグループを使用した場合の前（半径中央の座標を定義するためにyにxおよびY1にX1を設定するのに十分であろうと考えとそれはトリックをした）。しかし、グループにパスを追加するか、キャンバスに直接追加すると、グラデーションはまったく違って見えます。完全なパイが円だったかのように、それは

更新端に中心から行くと表示されるので、

だから、どのように私は放射状グラデーションでsetGradientを使用してください： 私は、if I気づいx = 0とy = 0を設定すると、グラデーションは中央に配置されます。

アップデート2： x1とy2の両方が勾配が左上隅から引き出される0に設定されている場合、これは勾配が90度の下で良いように表示します。 - 右：http://jsfiddle.net/Da7SP/61/

Update3と： Iそれを解決！ここで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', 
     } 
    });