js刻度尺插件_canvas生成刻度尺

ruler.js

$.fn.ruler = function(opt) {

var _default = {

width:400,

height:70,

min:0,

max:20,

step:1

}

var settings = $.extend({},_default,opt);

var _canvasW = $(this).width(),

_canvasH = $(this).height();

var myCanvas = document.getElementById($(this).find("canvas").eq(0).attr("id"));

myCanvas.width = _canvasW +25;

myCanvas.height = _canvasH;

var ctx = myCanvas.getContext("2d");

ctx.font="12px Microsoft Yahei";

//上边的遮罩

var myCanvas2 = document.getElementById($(this).find("canvas").eq(1).attr("id"));

myCanvas2.width = _canvasW +25;

myCanvas2.height = _canvasH;

var ctx2 = myCanvas2.getContext("2d");

ctx2.font="12px Microsoft Yahei";

ctx.clearRect(0, 0, _canvasW, _canvasH);

var diff = settings.max -settings.min;

if(settings.step < 1) {

diff = diff.toFixed(1) * 10;

}else {

diff = diff / settings.step;

}

var ratio = diff / _canvasW;

var tickSize = _canvasW / diff;

var tickCnt = Math.ceil(_canvasW / tickSize);

var x_h_pos = _canvasH/2 + 3;

ctx.moveTo(10, x_h_pos);

ctx.lineTo(_canvasW + 10, x_h_pos);

for (var i = 0; i <= tickCnt; i++) {

var lh = 5;

if(settings.step > 1) {

if(i % (10 / settings.step) == 0) {

lh=12;

}

}else {

if(i % 10 == 0) {

lh=12;

}

}

ctx.moveTo(10 + tickSize * i, x_h_pos);

ctx.lineTo(10 + tickSize * i, x_h_pos-lh);

ctx.textAlign = ‘center‘;

if(settings.step >= 1) {

if( i % (10 / settings.step) == 0 ) {

ctx.fillText((settings.min + settings.step * i), 10 + tickSize * i,  70);

}

} else {

if(i % 10 == 0) {

ctx.fillText((settings.min + 0.1 * i).toFixed(1), 10 + tickSize * i,  70);

}

}

}

if(!!settings.person) {

if(settings.step >= 1) {

for(var j = 0 ; j

var x = (settings.person[j].num - settings.min)*tickSize + 10 ;

ctx.moveTo(x ,x_h_pos);

ctx.lineTo(x , x_h_pos-30);

if(!isLowerIE()) {

(function(obj,pos_x){

var img = new Image();

img.src = obj.src;

img.onload = function() {

ctx.drawImage(img,pos_x-7,x_h_pos-30);

}

})(settings.person[j],x)

ctx.fillText(settings.person[j].num,x,x_h_pos - 35);

}else{

(function(obj,pos_x){

ctx.fillText(obj.txt,pos_x,x_h_pos-30);

})(settings.person[j],x)

ctx.fillText(settings.person[j].num,x,x_h_pos - 40);

}

}

ctx2.fillStyle=‘black‘;

ctx2.globalAlpha=.2;

ctx2.fillRect((settings.person[0].num - settings.min)*tickSize+ 10,x_h_pos-24,(settings.person[2].num - settings.person[0].num)*tickSize,x_h_pos - 28);

}else{

for(var j = 0 ; j

var x = (settings.person[j].num - settings.min)*tickSize*10 + 10;

ctx.moveTo(x ,x_h_pos);

ctx.lineTo(x , x_h_pos-30);

if(!isLowerIE()) {

(function(obj,pos_x){

var img = new Image();

img.src = obj.src;

img.onload = function() {

ctx.drawImage(img,pos_x-7,x_h_pos-30);

}

})(settings.person[j],x)

ctx.fillText(settings.person[j].num.toFixed(1),x,x_h_pos - 35);

}else{

(function(obj,pos_x){

ctx.fillText(obj.txt,pos_x,x_h_pos-30);

})(settings.person[j],x)

ctx.fillText(settings.person[j].num.toFixed(1),x,x_h_pos - 40);

}

}

ctx2.fillStyle=‘black‘;

ctx2.globalAlpha=.2;

ctx2.fillRect((settings.person[0].num - settings.min)*tickSize*10+ 10,x_h_pos-24,(settings.person[2].num - settings.person[0].num)*tickSize*10,x_h_pos - 28);

}

}

if(!!settings.orgs) {

if(settings.step>=1) {

for(var j = 0 ; j

var x = (settings.orgs[j].num - settings.min)*tickSize + 10;

ctx.moveTo(x, x_h_pos);

ctx.lineTo(x, x_h_pos + 25);

if(!isLowerIE()) {

(function(obj,pos_x){

var img = new Image();

img.src = obj.src;

img.onload = function() {

ctx.drawImage(img,pos_x-7,x_h_pos + 25);

}

})(settings.orgs[j],x)

ctx.fillText(settings.orgs[j].num,x,x_h_pos + 42);

}else{

(function(obj,pos_x){

ctx.fillText(obj.txt,pos_x,x_h_pos + 37);

})(settings.orgs[j],x)

ctx.fillText(settings.orgs[j].num,x,x_h_pos + 47);

}

}

ctx2.fillStyle=‘black‘;

ctx2.globalAlpha=.1;

ctx2.fillRect((settings.orgs[0].num - settings.min)*tickSize+ 10,x_h_pos,(settings.orgs[2].num - settings.orgs[0].num)*tickSize,x_h_pos - 30);

}else{

for(var j = 0 ; j

var x = (settings.orgs[j].num - settings.min)*tickSize*10 + 10;

ctx.moveTo(x, x_h_pos);

ctx.lineTo(x, x_h_pos + 25);

if(!isLowerIE()) {

(function(obj,pos_x){

var img = new Image();

img.src = obj.src;

img.onload = function() {

ctx.drawImage(img,pos_x-7,x_h_pos + 25);

}

})(settings.orgs[j],x)

ctx.fillText(settings.orgs[j].num.toFixed(1),x,x_h_pos + 42);

}else{

(function(obj,pos_x){

ctx.fillText(obj.txt,pos_x,x_h_pos + 37);

})(settings.orgs[j],x)

ctx.fillText(settings.orgs[j].num.toFixed(1),x,x_h_pos + 47);

}

}

ctx2.fillStyle=‘black‘;

ctx2.globalAlpha=.1;

ctx2.fillRect((settings.orgs[0].num - settings.min)*tickSize*10 + 10,x_h_pos,(settings.orgs[2].num - settings.orgs[0].num)*tickSize*10 ,x_h_pos - 30);

}

}

ctx.stroke();

function isLowerIE() {

var userAgent = navigator.userAgent;

var isOpera = userAgent.indexOf("Opera") > -1;

if (userAgent.indexOf("Trident") > -1 && !isOpera) {

var browser = navigator.appName;

var b_version = navigator.appVersion;

var version = b_version.split(";");

var trim_Version = version[1].replace(/[ ]/g, "");

if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE6.0") {

return true;

}

else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0") {

return true;

}

else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE8.0") {

return true

}else{

return false;

}

}else{

return false;

}

}

}

//为了兼容IE8 canvas必须定义在页面内，不能动态创建

//结构

//为了兼容IE8引入excanvas.js