基于sui 卡尺组件

2024-12-02 技术教程

calliphers.js

define(function(){varcallipers={};varspaceWidth=7;//间隔varheight=50;//默认高度varcallipersHtml="<divclass='swiper-container'>"+"<divclass='swiper-wrapper'>"+"<divclass='swiper-slide'>"+"<divclass='callipers-content'></div>"+"</div>"+"</div>"+"</div>"+"<canvas></canvas>";//获取数字长度functiongetNumberLength(number){varstr=""+number;returnstr.length;}functioncreateImage(container,width,height,minValue,maxValue){varcontainerWidth=$(container).width();varc=$(container).find("canvas")[0];varctx=c.getContext("2d");varmultiplyingPower=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(vari=minValue;i<=maxValue;i++){varnewIndex=spaceWidth*(i-minValue)+containerWidth/2;ctx.moveTo(newIndex*multiplyingPower,50*multiplyingPower);if(i==minValue){ctx.fillStyle="#959AB9";ctx.font="24pxArial";ctx.fillText(i,(newIndex-3)*multiplyingPower,28*multiplyingPower);ctx.lineTo(newIndex*multiplyingPower,35*multiplyingPower);}elseif(i%10==0){//绘制长线ctx.font="24pxArial";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();}varp_w_picpathDataUrl=c.toDataURL();$(container).find("canvas").remove();//删除canvasreturnp_w_picpathDataUrl;}functionresetSwiperTransition(swiper){vartranslate=swiper.getWrapperTranslate();varoffset=translate%spaceWidth;offset=offset*-1;if(offset>spaceWidth/2){translate=(parseInt(translate/spaceWidth)-1)*spaceWidth;}else{translate=(parseInt(translate/spaceWidth))*spaceWidth;}swiper.setWrapperTranslate(translate);varoffsetValue=translate/spaceWidth*-1;returnoffsetValue;}functionrender(container,settings){settings=settings||{};varminValue=settings.min||0;varmaxValue=settings.max||200;varprogressCallback=settings.progressCallback||function(){};vartransitionEndCallback=settings.transitionEndCallback||function(){};varinitValue=settings.initValue||parseInt((maxValue-minValue)/2+minValue);varcontainerWidth=$(container).width();varwidth=spaceWidth*(maxValue-minValue)+containerWidth;$(container).html(callipersHtml);container.attr("data-min",minValue);container.attr("data-max",maxValue);vardataURL=createImage(container,width,height,minValue,maxValue);$(container).find(".callipers-content").css({"background-p_w_picpath":"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){varvalue=resetSwiperTransition(swiper)+minValue;varoffset=(initValue-minValue)*spaceWidth*-1;swiper.setWrapperTranslate(offset);container.attr("data-value",initValue);swiper.updateProgress();container.addClass("initialized");},onTouchEnd:function(swiper){varvalue=resetSwiperTransition(swiper)+minValue;transitionEndCallback(value);container.attr("data-value",value);},onTransitionEnd:function(swiper){varvalue=resetSwiperTransition(swiper)+minValue;transitionEndCallback(value);container.attr("data-value",value);},onProgress:function(swiper,progress){varvalue=parseInt(swiper.getWrapperTranslate()/spaceWidth)*-1+minValue;progressCallback(value);container.attr("data-value",value);}});},100);//initswiper}//初始化标尺functioninit(settings){varcontainer=settings.container;$(container).each(function(){render($(this),settings);});}callipers.init=init;returncallipers;});

calliphers.css

.callipers{position:relative;opacity:0;}.callipers.initialized{opacity:1;}.calliperscanvas{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-repeatcentercenter;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

<divclass="page-group"><divclass="page"id="register-base-height"><divclass="content"><divclass="callipers"></div></div></div></div>

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