0

CanvasまたはSVGを使用して、このようなゲージを作成しようとしています。SVG の方がはるかに簡単に作成できると思われない限り、私は Canvas を使用するつもりです。私の質問は、キャンバスを使用して画像を使用しない場合、ゲージの外側に破線を作成するにはどうすればよいですか、または可能ですか.

ここに画像の説明を入力

ありがとう

4

1 に答える 1

9

ゲージが常に変化する場合は、キャンバスが適しています。

Canvas は再描画が非常に高速です。

SVG は再描画がそれほど速くありませんが、ユーザーの対話性が必要な場合には適しています。

ここに画像の説明を入力

このキャンバス関数は、内側の円と外側の円の間に放射状の線を描画します。

function radiantLine(centerX,centerY,innerRadius,outerRadius,degrees,linewidth,color){

    var radians=degrees*Math.PI/180;
    var innerX = centerX + innerRadius * Math.cos(radians);
    var innerY = centerY + innerRadius * Math.sin(radians);
    var outerX = centerX + outerRadius * Math.cos(radians);
    var outerY = centerY + outerRadius * Math.sin(radians);

    ctx.beginPath();
    ctx.moveTo(innerX,innerY);
    ctx.lineTo(outerX,outerY);
    ctx.strokeStyle=color;
    ctx.lineWidth=linewidth;
    ctx.stroke();

}

ゲージには 0 ～ 1000 の値があります。

この (0 ～ 1000) 範囲の値をゲージの弧の角度 (0 ～ 270) にマッピングするのに役立つコードを次に示します。

// scale the guage values (0-1000) is mapped
// into the range of a partial circle (0-270 degree arc)
// value==0 is mapped to 0 degrees on the arc
// value==1000 is mapped to 270 degrees on the arc
var scaledValue=scaleIntoRange(0,1000,0,270,value);


function scaleIntoRange(minActual,maxActual,minRange,maxRange,value){
  var scaled=(maxRange-minRange)*(value-minRange)/(maxActual-minActual)+minRange;
  return(scaled);
}

入力値が円の角度にマッピングされたら、ゲージの開始角度に合わせて 135 度回転します (ゲージの 0 度は円の約 135 度です)。

// rotate so guage value==0 starts at 135 degrees on the circle
var degrees=scaledValue+135;

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/GV8du/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var cx=150;
    var cy=150;
    var innerRadius=50;
    var outerRadius=65;
    var startRadians=135*Math.PI/180;
    var endRadians=405*Math.PI/180;


    for(var value=0;value<=1000;value+=25){

        // scale the guage values (0-1000) 
        // to fit into the range of a partial circle (0-270 degrees)
        var scaledValue=scaleIntoRange(0,1000,0,270,value);
        // rotate so guageValue==0 starts at 135 degrees on the circle
        var degrees=scaledValue+135;

        // draw the radiant line
        // draw thicker/longer line every 250
        if(value%250==0){
            radiantLine(cx,cy,innerRadius,outerRadius,degrees,2,"black");
        }else{
            var shorterLine=(outerRadius-innerRadius)/2;
            radiantLine(cx,cy,innerRadius,outerRadius-shorterLine,degrees,2,"lightgray");
        }
    }


    // draw inner arc of guage
    ctx.beginPath();
    ctx.arc(cx,cy,innerRadius,startRadians,endRadians,false);
    ctx.strokeStyle="black";
    ctx.lineWidth=3;
    ctx.stroke();

    // draw outer arc of guage (for illustration only)
    ctx.beginPath();
    ctx.arc(cx,cy,outerRadius,startRadians,endRadians,false);
    ctx.strokeStyle="lightgray";
    ctx.lineWidth=0.33;
    ctx.stroke();


    function radiantLine(centerX,centerY,innerRadius,outerRadius,degrees,linewidth,color){

        var radians=degrees*Math.PI/180;
        var innerX = centerX + innerRadius * Math.cos(radians);
        var innerY = centerY + innerRadius * Math.sin(radians);
        var outerX = centerX + outerRadius * Math.cos(radians);
        var outerY = centerY + outerRadius * Math.sin(radians);

        ctx.beginPath();
        ctx.moveTo(innerX,innerY);
        ctx.lineTo(outerX,outerY);
        ctx.strokeStyle=color;
        ctx.lineWidth=linewidth;
        ctx.stroke();

    }


    function scaleIntoRange(minActual,maxActual,minRange,maxRange,value){
      var scaled=(maxRange-minRange)*(value-minRange)/(maxActual-minActual)+minRange;
      return(scaled);
    }

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
于 2013-07-03T18:34:49.687 に答える