7

私は円形のプログレスバーを作成しようとしています(それはもうバーではありませんか?)。このクリクルの周りには、円に垂直な細いバーがあります。問題は、私のコードが等間隔でバーを生成しないことです。コードと結果の画像は次のとおりです。 円に対する不均一な垂線

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

編集:ああ、また、行はアンチエイリアスされていません。なぜなのかご存知ですか？このプログレスバーは 2 つの部分で構成されていることも説明する必要があります。外側の円 (提供された画像に表示) と内側の円。外側の円はパーセンテージの整数部分の量 (つまり、45.98% の 45) であり、内側の円はパーセンテージの非整数部分の量 (つまり、45.98% の 98) です。したがって、intCircle と floatCircle が何であるかがわかります :)

4

2 に答える 2

1

線が規則的なパターン (この例では 5 つの閉じた領域) で接近してから離れている様子を見ると、それが三角関数に関連していることを示す良い指標になります。パターンに正弦波がほとんど見られます。

いずれにせよ、光線を描画するための計算にはいくつかのエラーがあります。この単純化された例を試してください:

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 に答える