基于sui 卡尺组件

Posted 2020-09-17

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