7

我正在尝试创建一个圆形进度条（尽管它不再是进度条了，对吗？）。在这个criicle周围有垂直于圆圈的细条。现在的问题是，我的代码不会以均匀的间距生成条形。这是代码和结果的图像： 不均匀的与圆垂直的线

function MH5PB(canvasId,            //the id of the canvas to draw the pb on
                value,              //a float value, representing the progress(ex: 0.3444)
                background,         //the background color of the pb(ex: "#ffffff")
                circleBackground,   //the background color of the bars in the circles
                integerColor,       //the color of the outer circle(or the int circle)
                floatColor          //the color of the inner circle(or the float circle)
                )
{
    var canvas = document.getElementById(canvasId);
    var context = canvas.getContext("2d");
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;
    var radius = Math.min(canvasWidth, canvasHeight) / 2;
    var numberOfBars = 72;
    var barThickness = 2;

    //margin from the borders, and also the space between the two circles
    var margin = parseInt(radius / 12.5) >= 2 ? parseInt(radius / 12.5) : 2; 

    //the thickness of the int circle and the float circle
    var circleThickness = parseInt((radius / 5) * 2);

    //the outer radius of the int circle
    var intOuterRadius = radius - margin;
    //the inner radius of the int circle
    var intInnerRadius = radius - margin - circleThickness;

    //the outer radius of the float circle
    var floatOuterRadius = intOuterRadius - margin - circleThickness;
    //the inner radius of the float circle
    var floatInnerRadius = floatOuterRadius - circleThickness;

    //draw a bar, each degreeStep degrees
    var intCircleDegreeStep = 5;
                                    // ((2 * Math.PI * intOuterRadius) / (barThickness + 10)) //
                                    //  this area is the total number of required bars  //
                                    //  to fill the intCircle.1px space between each bar//
    var floatCircleDegreeStep = 360 / ((2 * Math.PI * floatOuterRadius) / (barThickness + 10));        

    context.lineWidth = barThickness;
    context.strokeStyle = circleBackground;
    //draw the bg of the outer circle
    for(i = 90; i < 450; i+=intCircleDegreeStep)
    {
        //since we want to start from top, and move cw, we have to map the degree
        //in the loop
        cxOuter = Math.floor(intOuterRadius * Math.cos(i) + radius);
        cyOuter = Math.floor(intOuterRadius * Math.sin(i) + radius);
        cxInner = Math.floor(intInnerRadius * Math.cos(i) + radius);
        cyInner = Math.floor(intInnerRadius * Math.sin(i) + radius);
        context.moveTo(cxOuter, cyOuter);
        context.lineTo(cxInner, cyInner);
        context.stroke();
    }
}

编辑：哦，线条也没有抗锯齿。你知道为什么吗？我还应该解释一下，这个进度条由两部分组成。一个外圆（在提供的图像中可见）和一个内圆。外圈是百分比的整数部分的数量（即45.98% 中的45），内圈是百分比的非整数部分的数量（即45.98% 中的98）。因此，您现在知道 intCircle 和 floatCircle 是什么 :)

4

2 回答 2

5

看来您正在将学位传递给 Math.sin 和 Math.cos。这些函数需要弧度。例如，

// i degrees to radians.
Math.sin(i * (Math.PI / 180));
于 2013-05-19T17:32:32.187 回答
1

如果您查看线条靠近然后以规则模式分开的方式（示例中为五个接近区域），这可以很好地表明它与您的三角函数有关。您几乎可以在图案中看到正弦波。

在任何情况下，你绘制光线的数学都有一些错误。试试这个简化的例子：

function MH5PB(canvasId,            //the id of the canvas to draw the pb on
                value,              //a float value, representing the progress(ex: 0.3444)
                background,         //the background color of the pb(ex: "#ffffff")
                circleBackground,   //the background color of the bars in the circles
                integerColor,       //the color of the outer circle(or the int circle)
                floatColor          //the color of the inner circle(or the float circle)
                )
{
    var canvas = document.getElementById(canvasId);
    var context = canvas.getContext("2d");
    var barThickness = 2;

    context.lineWidth = barThickness;
    context.strokeStyle = circleBackground;


    var innerRadius = 30;
    var outerRadius = 80;
    var center = { x:50, y:50 };
    var percentDone = 60;
    var angleOfPercentDone = percentDone * 360 / 100;

    //rotate everything -90 degrees
    angleOfPercentDone -= 90;
    for(var angle = -90; angle < angleOfPercentDone; angle +=5)
    {
        //convert to radians
        var rad = angle * Math.PI/180;
        var c = Math.cos(rad);
        var s = Math.sin(rad);
        var innerPointX = center.x + (innerRadius * c);
        var innerPointY = center.y + (innerRadius * s);
        var outerPointX = center.x + (outerRadius * c);
        var outerPointY = center.x + (outerRadius * s);
        context.moveTo(innerPointX, innerPointY);
        context.lineTo(outerPointX, outerPointY);
        context.stroke();
    }
}

在这里查看小提琴：http: //jsfiddle.net/DXwrc/

于 2013-05-19T18:10:35.227 回答