Gauge.js幾乎完整的圈子

我想模仿一個在gauge.js的網站上的演示，但沒有運氣。我想弄清楚如何創建一個實際上幾乎是整圈的測量儀。半圓規不適合我需要的東西。有任何想法嗎？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 

    });

來源

2013-07-08 Nikolaos Vassos

可以使用帆布context.rotate

畫一個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]圖座標到indicatorX/Y位置
旋轉將旋轉上下文當前指定的旋轉的程度

此外，通知context.save和上下文恢復。

Context.save（）將保存未移動和未旋轉的canvas上下文的狀態。
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-09 00:16:59 markE

這是相當真棒馬克。要處理我正在做的事情，你可以改變它以將0置於底部？另外，你能否告訴我哪個因素控制着360度。如果我想在340度的圈子裏擁有它，該怎麼辦？ –

指示器角度由indicatorDegrees變量控制。要在底部啓動指示器，只需在計算角度時添加+180度。要將指標限制爲最大值340，只需禁止> 340的值。下面是一個調整後的小提琴：http://jsfiddle.net/m1erickson/ywCvX/ – markE

謝謝你。這工作。 –

Gauge.js幾乎完整的圈子

回答

相關問題