0

我试图模仿 Gauge.js 网站上的一个演示，但没有运气。我试图弄清楚如何创建一个实际上几乎是完整圆圈的仪表。半圆规不能满足我的需要。有任何想法吗？

这是我目前所拥有的，但它呈现出半个规格。

    $( 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] 绘图坐标移动到指示器 X/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 回答