Question

我试图在没有运气的情况下模仿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

    });

Answer 1

您可以使用画布上下文绘制360度指示指示器。旋转

首先声明您的指标样式：

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

然后使用此功能以0（垂直）到360（返回垂直）的任何角度绘制指示器：

请注意使用translate和rotate。

翻译将上下文[0,0]绘图坐标移动到指示符X / Y位置
旋转会将上下文旋转到当前指定的旋转度

另外，请注意context.save和上下文恢复。

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>

Gauge.js几乎全圆

1 个答案: