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
});回答 1
Stack Overflow用户
发布于 2013-07-09 08:16:59
可以使用canvas 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 position
- Rotate会将上下文旋转到当前指定的旋转度
另外，请注意context.save和上下文恢复。
- Context.save()将保存未移动和未旋转的画布的状态context.
- 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=“灰色”；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=“黄金”；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>https://stackoverflow.com/questions/17537287
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号