將一個二次切片分成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

回答

相關問題