基于sui 卡尺组件

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;
});

.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;}

<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 -->

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();
});