Question

下面是使用众所周知的公式在笛卡尔坐标中生成“填充”圆（磁盘）的代码：

（x - j）² +（y - k）² = r ²

其中j＆amp; k是中心的坐标，r是半径。

它运作良好，但现在我想只生成一个扇区，一个磁盘饼，但仍然使用笛卡尔坐标。有关如何实现这一目标的任何线索？

    for(var scanx=x-radius; scanx<x+radius; scanx+=1) {            
        // out of extend
        if(scanx<0 || scanx>params.width){
            continue;
        }
        for(var scany=y-radius; scany<y+radius; scany+=1) {

            if(scany<0 || scany>params.height) {
              continue;
            }                  

            var dist = Math.sqrt(Math.pow((scanx-x), 2)+Math.pow((scany-y), 2));

            if(dist > radius) {
                continue;
            } else {
                var v = data - params.step * Math.pow(dist, degree);
                var id = scanx+scany*params.width;
                if(value[id]){
                   value[id] = Math.max(value[id], v); 
                } else {
                    value[id] = v;
                }
            }
        }
    }

Answer 1

您可以通过定义要输出的x和y轴的截面来绘制曲线的一部分。

因此，如果您想要打印圆圈的第一个象限，您可以将“x”for循环限制在0和x+radius之间，并将“y”for循环限制在0和y+radius。

如果您要根据起始角度θ1和最终角度θ2查找输出，则需要使用以下方法将这些输出转换为极坐标到笛卡尔坐标：

x1 = r × cos( θ1 ); y1 = r × sin( θ1 ); 
x2 = r × cos( θ2 ); y2 = r × sin( θ2 );

然后使用值x1，x2作为x for-loop边界，使用y1和y2作为y for-loop边界。

使用此方法的一个警告：

如果您的弧距超过45度，则需要将其从开始到最近的轴分成几段并获得最大坐标值。或者你可以循环通过角度步骤并从上面的极地 - 笛卡尔转换中打印出x-y坐标。

Answer 2

你可以使用画布：

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
ctx.lineTo(x, y);
ctx.closePath();
ctx.fill();

Demo

笛卡尔坐标中的饼图

2 个答案: