0

運が悪いと、gauge.js の Web サイトにあるデモの 1 つを模倣しようとしています。実際にほぼ完全な円であるゲージを作成する方法を見つけようとしています。半円ゲージは、私が必要としているものには機能しません。何か案は？

これは私が現時点で持っているものですが、ハーフゲージをレンダリングします.

    $( document ).ready(function() {

    var opts = {
    lines: 12, // The number of lines to draw
    angle: 0, // The length of each line
    lineWidth: 0.0001, // The line thickness
    pointer: {
    length: 0.9, // The radius of the inner circle
    strokeWidth: 0.035, // The rotation offset
    color: '#000' // Fill color
    },
    colorStart: '#FFF',   // Colors
    colorStop: '#FFF',    // just experiment with them
    strokeColor: '#E0E0E0',   // to see which ones work best for you
    generateGradient: true
    };
    var target = document.getElementById('foo'); // your canvas element
    var gauge = new Gauge(target);
    gauge.setOptions(opts); // create sexy gauge!
    gauge.maxValue = 3000; // set max gauge value
    gauge.animationSpeed = 32; // set animation speed (32 is default value)
    gauge.set(1250); // set actual value

    });
4

1 に答える 1

1

キャンバス context.rotate を使用して、360 度のゲージ インジケーター インジケーターを描画できます。

最初にインジケーターのスタイルを宣言します。

    var indicatorX=150;
    var indicatorY=150;
    var indicatorBaseWidth=10;
    var indicatorHeight=75;
    var indicatorDegrees=0;
    var indicatorFill="maroon";

次に、この関数を使用して、0 (垂直) から 360 (垂直に戻る) までの任意の角度でインジケーターを描画します。

平行移動と回転の使用に注意してください。

  • Translate はコンテキスト [0,0] 描画座標を indicatorX/Y 位置に移動します
  • Rotate は、コンテキストを現在指定されている回転角度まで回転させます。

また、context.save と context restore にも注目してください。

  • Context.save() は、移動も回転もされていないキャンバス コンテキストの状態を保存します。
  • Context.restore() は、コンテキストの状態を移動も回転もされていない状態に戻します。

  • 以前のローテーションを記憶して調整する必要がないように、保存/復元を使用します。

    function drawIndicator(){
      ctx.clearRect(0,0,canvas.width,canvas.height);
      ctx.save();
      ctx.translate(indicatorX,indicatorY);
      ctx.rotate(indicatorDegrees*Math.PI/180);
      ctx.beginPath();
      ctx.moveTo(-indicatorBaseWidth/2,0);
      ctx.quadraticCurveTo(0,10,indicatorBaseWidth/2,0);
      ctx.lineTo(0,-indicatorHeight);
      ctx.closePath();
      ctx.strokeStyle="gray";
      ctx.lineWidth=3;
      ctx.stroke();
      ctx.fillStyle=indicatorFill;
      ctx.fill();
      ctx.beginPath();
      ctx.arc(0,0,3,0,Math.PI*2,false);
      ctx.closePath();
      ctx.fillStyle="gold";
      ctx.fill();
      ctx.restore();
}

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

<!doctype html>
<html lang="en">
<head>

  <style>
      body{ background-color: ivory; }
      #wrapper{ position:relative; }
      canvas{ position:absolute; left:40px; top:5px; border:1px solid red;}
      #amount{ position:absolute; left:1px; top:5px; margin-bottom:15px; width:23px; border:0; color:#f6931f; font-weight:bold; }
      #slider-vertical{ position:absolute; left:5px; top:40px; width:15px; height:225px; border:0px; color:#f6931f; font-weight:bold; }
  </style>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <script>

  $(function() {

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

    var indicatorX=150;
    var indicatorY=150;
    var indicatorBaseWidth=10;
    var indicatorHeight=75;
    var indicatorDegrees=0;
    var indicatorFill="maroon";


    $( "#slider-vertical" ).slider({
      orientation: "vertical",
      range: "min",
      min: 0,
      max: 360,
      value: 0,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
        indicatorDegrees=ui.value;
        drawIndicator();
      }
    });

    $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );


    function drawIndicator(){
          ctx.clearRect(0,0,canvas.width,canvas.height);
          ctx.save();
          ctx.translate(indicatorX,indicatorY);
          ctx.rotate(indicatorDegrees*Math.PI/180);
          ctx.beginPath();
          ctx.moveTo(-indicatorBaseWidth/2,0);
          ctx.quadraticCurveTo(0,10,indicatorBaseWidth/2,0);
          ctx.lineTo(0,-indicatorHeight);
          ctx.closePath();
          ctx.strokeStyle="gray";
          ctx.lineWidth=3;
          ctx.stroke();
          ctx.fillStyle=indicatorFill;
          ctx.fill();
          ctx.beginPath();
          ctx.arc(0,0,3,0,Math.PI*2,false);
          ctx.closePath();
          ctx.fillStyle="gold";
          ctx.fill();
          ctx.restore();
    }


    drawIndicator();


  });   // end $(function(){});

  </script>
</head>
<body>
    <div id="wrapper">
        <input type="text" id="amount" />
        <div id="slider-vertical"></div>
        <canvas id="canvas" width=300 height=300></canvas>
    </div>
</body>
</html>
于 2013-07-09T00:16:59.440 に答える