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

Я подумал, что было бы достаточно, чтобы установить x1 х и y1 к у, чтобы определить координаты середины, а затем радиус (до того, когда я использовал PathGroup что сделал трюк). но теперь, когда я добавляю «Путь в группу» или непосредственно на холст, градиент выглядит совершенно иначе.

Итак, как же я использую setGradient с радиальным градиентом, так что отображается, если полный пирог был круг, она будет идти от центра к краю

Update: Я заметил, что если я set x = 0 и y = 0, тогда градиент центрируется.

Update2: Если оба 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', 
     } 
    });