将二次切片拆分为 3 个较小的切片 HTML5 CANVAS JS答案

【问题标题】：Spliting a quadratic slice into 3 smaller slices HTML5 CANVAS JS将二次切片拆分为 3 个较小的切片 HTML5 CANVAS JS
【发布时间】：2012-01-12 12:26:36
【问题描述】：

我有一条二次曲线，用于创建饼图的一部分。切片位于 x 和 y 轴上，中心点位于 (0,0)。半径在 radiusX 和 radiusY 处是可变的。此切片行进 90 度。

我需要将此切片分成 3 个单独的切片（每个切片具有 30 度角）并让它们匹配其父切片具有的任何曲线。

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

这是我制作的功能，但它无法正常工作：

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

【问题讨论】：

@Feeny 我已经运行了这个，但我仍然不清楚 - 抱歉。 'globalPosX 和 globalPosY 等于两个大黑圈各自的位置'是什么意思。黑圈在哪里？我知道图像丢失了。我已经投票给你了。现在可以穿了吗？
@CrabBucket 我需要声誉 10 才能添加图片
@Feeny 你现在应该有足够的代表了 ;)
我为你创建了一个小提琴。请填写空白，使其工作，并将其编辑到您的问题中，以便人们可以更轻松地深入研究代码 =) jsfiddle.net/pukster/xrTDM/1
@puk - 谢谢，我只是在输入代码，但有一点问题。我输入的代码有效，但不确定如何设置它以在 jsfiddle 中工作。 jsfiddle.net/xrTDM/3

标签： javascript html canvas split quadratic

【解决方案1】：

使用最近的“blackDot”作为圆的半径，使用圆圈，将您的象限分为 3 (see wiki) 然后按 0,0 和“blackDot”之间的距离的比率缩放点

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

【讨论】：