calliphers.js
define(function(){
var callipers = {};
var spaceWidth = 7; // 间隔
var height = 50; // 默认高度
var callipersHtml = "<div class=‘swiper-container‘> "+
" <div class=‘swiper-wrapper‘> "+
" <div class=‘swiper-slide‘> "+
" <div class=‘callipers-content‘></div>"+
" </div> "+
" </div> "+
"</div> "+
"<canvas></canvas> ";
// 获取数字长度
function getNumberLength(number){
var str = ""+number;
return str.length;
}
function createImage(container,width,height,minValue,maxValue){
var containerWidth = $(container).width();
var c=$(container).find("canvas")[0];
var ctx=c.getContext("2d");
var multiplyingPower=2;
c.width=width*multiplyingPower;
c.height=height*multiplyingPower;
ctx.strokeStyle="#36384d";
ctx.lineWidth=1*multiplyingPower;
// 绘制底部线条
ctx.beginPath();
ctx.moveTo(containerWidth/2*multiplyingPower,height*multiplyingPower);
ctx.lineTo(width*multiplyingPower-containerWidth/2*multiplyingPower,height*multiplyingPower);
ctx.stroke();
// 绘制
for(var i=minValue;i<=maxValue;i++){
var newIndex = spaceWidth*(i-minValue)+containerWidth/2;
ctx.moveTo(newIndex*multiplyingPower,50*multiplyingPower);
if(i==minValue){
ctx.fillStyle="#959AB9";
ctx.font="24px Arial ";
ctx.fillText(i,(newIndex-3)*multiplyingPower,28*multiplyingPower);
ctx.lineTo(newIndex*multiplyingPower,35*multiplyingPower);
}else if(i%10==0){// 绘制长线
ctx.font="24px Arial";
ctx.fillText(i,(newIndex-6*(getNumberLength(i)-1))*multiplyingPower,28*multiplyingPower);
ctx.lineTo(newIndex*multiplyingPower,35*multiplyingPower);
}else{//绘制短线
ctx.lineTo(newIndex*multiplyingPower,43*multiplyingPower);
}
ctx.stroke();
}
var imageDataUrl = c.toDataURL();
$(container).find("canvas").remove(); // 删除canvas
return imageDataUrl;
}
function resetSwiperTransition(swiper){
var translate = swiper.getWrapperTranslate();
var offset = translate%spaceWidth;
offset = offset*-1;
if(offset>spaceWidth/2){
translate = (parseInt(translate/spaceWidth)-1)*spaceWidth;
}else{
translate = (parseInt(translate/spaceWidth))*spaceWidth;
}
swiper.setWrapperTranslate(translate);
var offsetValue = translate/spaceWidth*-1;
return offsetValue;
}
function render(container,settings){
settings = settings||{};
var minValue = settings.min||0;
var maxValue = settings.max||200;
var progressCallback = settings.progressCallback||function(){};
var transitionEndCallback = settings.transitionEndCallback||function(){};
var initValue = settings.initValue||parseInt((maxValue-minValue)/2+minValue);
var containerWidth= $(container).width();
var width = spaceWidth*(maxValue-minValue)+containerWidth;
$(container).html(callipersHtml);
container.attr("data-min",minValue);
container.attr("data-max",maxValue);
var dataURL = createImage(container,width,height,minValue,maxValue);
$(container).find(".callipers-content").css({
"background-image":"url("+ dataURL+")",
"width":width+"px"
});
setTimeout(function(){
$(container).find(".swiper-container").swiper({
runCallbacksOnInit:false,
freeModeMomentumRatio:0.2,
touchRatio:0.5,
slidesPerView: "auto",
resistanceRatio: 0,
freeMode: true,
onInit:function(swiper){
var value = resetSwiperTransition(swiper)+minValue;
var offset = (initValue-minValue)*spaceWidth*-1;
swiper.setWrapperTranslate(offset);
container.attr("data-value",initValue);
swiper.updateProgress();
container.addClass("initialized");
},
onTouchEnd:function(swiper){
var value = resetSwiperTransition(swiper)+minValue;
transitionEndCallback(value);
container.attr("data-value",value);
},
onTransitionEnd:function(swiper){
var value = resetSwiperTransition(swiper)+minValue;
transitionEndCallback(value);
container.attr("data-value",value);
},
onProgress:function(swiper,progress){
var value = parseInt(swiper.getWrapperTranslate()/spaceWidth)*-1+minValue;
progressCallback(value);
container.attr("data-value",value);
}
});
},100);
// init swiper
}
// 初始化 标尺
function init(settings){
var container = settings.container;
$(container).each(function(){
render($(this),settings);
});
}
callipers.init = init;
return callipers;
});calliphers.css
.callipers{position:relative;opacity:0;}
.callipers.initialized{
opacity:1;
}
.callipers canvas{display:none;}
.callipers:before{
content:"";
position:absolute;
left:0;
bottom:0;
right:0;
width:1px;
height:47px;
background-color:#b540a8;
margin:auto;
z-index: 99;
}
.callipers .callipers-content{
height:50px;
background:no-repeat center center;
background-size:contain;
}
.callipers .swiper-container{padding:0;}
.callipers .swiper-container .swiper-wrapper{height:auto;}
.callipers .swiper-container .swiper-slide{width:auto;height:auto;}test.html
<div class="page-group"> <div class="page" id="register-base-height"> <div class="content"> <div class="callipers "></div> </div><!-- content --> </div><!-- page --> </div><!-- page-group -->
test.js
define(["callipers"], function(callipers) {
$(document).on("pageInit", "#test", function(e, pageId, $page) {
callipers.init({
container:$page.find(".callipers"),
min:20,
max:220,
initValue:90,
progressCallback:function(value){
console.log("value");
},
transitionEndCallback:function(value){
console.log("value");
}
});
});
$.init();
});
原文地址：http://antlove.blog.51cto.com/10057557/1923932
