将一个二次切片分成3个更小的切片HTML5 CANVAS JS

我有一个二次曲线，用于创建一个饼图。切片位于x和y轴上，中心点在（0,0）处。半径在半径X和半径Y处可变。此切片行进90度。将一个二次切片分成3个更小的切片HTML5 CANVAS JS

我需要将这个切片分成3个独立的切片（每个切片有30度角），并让它们匹配他们父母切片的任何曲线。

以下图片显示切片的可能示例。黑色圆圈调整片的大小/形状：

enter image description here

这里是我做的功能，但它只是工作不正常：

//globalPosX and globalPosY equal whatever position each of the two large black circles have repectively. 
    var canvas = document.getElementById('CV_slices'); 
    var context = canvas.getContext('2d'); 
    var cenX = canvas.width/2; 
    var cenY = canvas.height/2; 
    var blackDotX = globalPosX - cenX; 
    var blackDotY = cenY - globalPosY; 
    var endX; 
    var endY; 
    var controlX; 
    var controlY; 
//set first slice 
    var startCoOrds = { 
     x: cenX , 
     y: globalPosY 
    };     

    for (i=1; i < 4; i++) { 
//make end(x,y) of previous slice the start(x,y) for the next slice. 
    endX = startCoOrds.x - (blackDotX*Math.sin(30)); 
    endY = startCoOrds.y + (blackDotY*Math.cos(30)); 
//set position of control point using position of start/end positions (at the moment only adjustibng using +10 -10 at end) 
    controlX = ((endX - startCoOrds.x) /2) + (startCoOrds.x) + 10; 
    controlY = ((endY - startCoOrds.y)/2) + (startCoOrds.y) - 10; 

// draw slice 
    context.save(); 
    context.beginPath(); 
    context.moveTo(cenX, cenY); 
    context.lineTo(startCoOrds.x, startCoOrds.y); 
    context.quadraticCurveTo(controlX, controlY, endX, endY); 
    context.lineTo(cenX, cenY); 
//make end(x,y) of previous slice the start(x,y) for the next slice 
    startCoOrds.x = endX; 
    startCoOrds.y = endY; 

    context.closePath(); 
    context.globalAlpha = 0.1; 
    context.fillStyle = "#333333"; 
    context.fill(); 
    context.lineWidth = 2; 
    context.strokeStyle = "#ffffff"; 
    context.stroke(); 
    context.restore(); 
    }

来源

2012-01-12 Feeney

@Feeny我已经运行这个，但我仍然不清楚 - 对不起。 'globalPosX和globalPosY等于两个黑色大圆圈中的每一个都具有什么意思'是什么意思。黑圈在哪里？我知道图像丢失了。我已经投票给你了。你可以把它们放在现在吗？ – 2012-01-12 13:36:09

@CrabBucket我需要声望10才能添加图片 – Feeney 2012-01-12 14:48:03

@Feeny您现在应该有足够的代表; – 2012-01-12 15:32:43

使用最接近“黑点“作为圆的半径，使用该圆，将你的象限分为3（see wiki）然后按0,0和”黑点“的

实际上，您的圆弧是已在x或y轴中缩放的圆的象限。

来源

2012-02-04 21:03:17

将一个二次切片分成3个更小的切片HTML5 CANVAS JS

回答

相关问题