115 lines
3.5 KiB
JavaScript
115 lines
3.5 KiB
JavaScript
var $compass = function (parent, option) {
|
|
if (typeof parent === 'string') {
|
|
parent = $(parent);
|
|
}
|
|
this.parent = parent;
|
|
this.option = option;
|
|
};
|
|
|
|
(function () {
|
|
var __proto = $compass.prototype;
|
|
|
|
var $defcolors = {
|
|
line: '#8cc8ad',
|
|
pointer: '#cc3735',
|
|
background: null
|
|
};
|
|
var $widths = {
|
|
line: 10,
|
|
circle: 10
|
|
};
|
|
var $vars = {
|
|
radius: 50,
|
|
font: 'Verdana',
|
|
fontSize: 14
|
|
};
|
|
|
|
function round(num) { return (num + 0.5) << 0; }
|
|
function radians(degress) { return degress * Math.PI / 180; }
|
|
|
|
__proto.draw = function (value) {
|
|
var r = this.option.radius || $vars.radius;
|
|
var line = this.option.lineWidth || $widths.line;
|
|
var canvas = $('<canvas></canvas>');
|
|
var size = (r + line) * 2;
|
|
canvas.css({
|
|
'width': size,
|
|
'height': size
|
|
}).appendTo(this.parent.empty());
|
|
|
|
try {
|
|
var ctx = canvas[0].getContext('2d');
|
|
canvas[0].width = size;
|
|
canvas[0].height = size;
|
|
this.startDraw(ctx, size, value);
|
|
} catch (e) {
|
|
console.error('failed when init context: ' + e);
|
|
return;
|
|
}
|
|
};
|
|
|
|
__proto.startDraw = function (ctx, size, value) {
|
|
var background = this.option.background || $defcolors.background;
|
|
if (background != null) {
|
|
ctx.fillStyle = background;
|
|
ctx.fillRect(0, 0, size, size);
|
|
}
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
|
|
var lineColor = this.option.lineColor || $defcolors.line;
|
|
var lineWidth = this.option.lineWidth || $widths.line;
|
|
var radius = this.option.radius || $vars.radius;
|
|
var pos = size / 2;
|
|
ctx.translate(pos, pos);
|
|
ctx.strokeStyle = lineColor;
|
|
ctx.lineWidth = lineWidth;
|
|
ctx.beginPath();
|
|
ctx.arc(0, 0, radius, 0, radians(360), false);
|
|
ctx.stroke();
|
|
|
|
if (background != null) {
|
|
ctx.fillStyle = background;
|
|
} else {
|
|
ctx.fillStyle = '#fff';
|
|
}
|
|
var drawSegment = function () {
|
|
ctx.beginPath();
|
|
ctx.fillRect(radius - lineWidth / 2, -1, lineWidth, 2);
|
|
ctx.rotate(radians(9));
|
|
for (var i = 0; i < 9; i++) {
|
|
ctx.beginPath();
|
|
ctx.fillRect(radius - lineWidth / 6, 0, lineWidth * 2 / 3, 1);
|
|
ctx.rotate(radians(9));
|
|
}
|
|
};
|
|
for (var i = 0; i < 4; i++) {
|
|
drawSegment();
|
|
}
|
|
|
|
var font = 'bold ' + (this.option.fontSize || $vars.fontSize) + 'px ' + (this.option.font || $vars.font);
|
|
ctx.fillStyle = '#000';
|
|
ctx.font = font;
|
|
ctx.fillText('E', radius - lineWidth - 4, 0);
|
|
ctx.fillText('S', 0, radius - lineWidth - 4);
|
|
ctx.fillText('W', lineWidth + 6 - radius, 0);
|
|
ctx.fillText('N', 0, lineWidth + 6 - radius);
|
|
|
|
// value
|
|
var rc = (this.option.circleWidth || $widths.circle) / 2;
|
|
ctx.rotate(radians(value - 90));
|
|
ctx.save();
|
|
ctx.fillStyle = this.option.pointerColor || $defcolors.pointer;
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, -rc);
|
|
ctx.lineTo(radius > 20 ? (radius - 20) : 1, 0);
|
|
ctx.lineTo(0, rc);
|
|
ctx.fill();
|
|
ctx.restore();
|
|
|
|
ctx.fillStyle = lineColor;
|
|
ctx.beginPath();
|
|
ctx.arc(0, 0, rc, 0, radians(360), false);
|
|
ctx.fill();
|
|
};
|
|
})(); |