FabricJs - Radiale Steigung für Tortenstücke

Question

Wie Sie hier sehen: http://jsfiddle.net/Da7SP/60/ Ich habe 64 Tortenstücke, die einen radialen Verlauf von der Mitte bis zum Rand haben wollen. (Live jedes Stück wird verschiedene Farben haben), aber es gelingt mir nicht, diesen Effekt zu erzeugen. Hier

ist der Code:

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

Ich dachte, dass es ausreichen würde, x1 bis x und y 1 bis y setzen die Koordinaten für die Mitte zu definieren und dann den Radius, (vor, wenn ich verwendet Pfadgruppe das hat den Trick gemacht). Aber jetzt, wenn ich den Pfad zu einer Gruppe oder direkt zum Canvas hinzufüge, sieht der Farbverlauf völlig anders aus.

Also, wie kann ich die setGradient mit einem radialen Farbverlauf verwenden, so dass es angezeigt wird, als ob der gesamte Kuchen ein Kreis war, es von der Mitte zum Rande hin

-Update gehen würde: Ich habe bemerkt, dass, wenn ich Setze x = 0 und y = 0, dann wird der Gradient zentriert.

Update2: Wenn beide x1 und y2 auf 0 gesetzt ist die Steigung von der linken oberen Ecke gezogen wird, macht dies die Steigung in der unteren 90 Grad gut aussieht - rechts: http://jsfiddle.net/Da7SP/61/

Update3: I Ich habe es gelöst! Hier ist http://jsfiddle.net/Da7SP/64/ die Geige für dich, die das gleiche Problem hat und unten siehst du das Ergebnis und den Code.

Dies machte den Trick:

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, 

Hier ist das erwartete Ergebnis:

Hier ist der Code

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

Hier ist der Code, der fehlte, war:

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