动态刻度圆

Posted 2020-10-28 糖糖部落

 

html:

<input type="hidden" class="progressRate" value="{$content.progressRate/100}"> <!--progressRate 投资进度-->
<canvas id="draw_circle" style="width:7rem;height:7rem;"></canvas>

js：

define(function(require, exports) {
    window.requestAnimFrame = (function() {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 200);
            };
    })();

    var u = navigator.userAgent,
        app = navigator.appVersion,
        isandroid = u.indexOf(\'Android\') > -1 || u.indexOf(\'Linux\') > -1, //android终端或者uc浏览器
        isios = !!u.match(/\\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    var stage = new createjs.Stage("draw_circle"),  //画布
        clock = new createjs.Shape(); //刻度圆
    stage.autoClear = true; 
    if (isiOS) {
        var    position = Math.floor(lib.flexible.rem2px(3.5)), //坐标 (画布一半的距离/中心点位置)
            circleR = Math.floor(lib.flexible.rem2px(3.12)); //半径
    } else if (isAndroid) {
        var    position = Math.floor(lib.flexible.rem2px(14)), //坐标 (画布一半的距离/中心点位置)
            circleR = Math.floor(lib.flexible.rem2px(12)); //半径
    }

    var rate =$(".progressRate").val(), //投资进度 
        i = 0,
        first = 1, //1：进入页面，第一次绘制100%刻度圆（蓝色）   2：绘制投资进度的 刻度圆（灰色）
        gArr = []; //用于存放 绘制的刻度
    exports.init = function() {
        fn_drawClock(circleR, 0); //100%刻度圆

        //手动移除loading 测试
        // $(".mainCon").removeClass(\'undis\');
        // seajs.use(\'module/bankCommon/loading\', function(argument){
  //           argument.loadingFn();
  //       });
        //进度-刻度圆
        setTimeout(function() {
            first = 2;
            fn_drawArc();  
        }, 500)
    }

    //进度动画展示
    function fn_drawArc() {
        fn_drawClock(circleR, i);
        if (i < rate) {
            i += 0.01; //进度递增
            $(".progress .jsRateNum").html(100 - (Math.round(i * 100)));
            window.requestAnimFrame(fn_drawArc);
        } else {
            stage = null; //最后清空画布，释放内存
        }
    }
    
    //刻度 圆环
    function fn_drawClock(r, rate) {
        var x0 = 0;
        var y0 = 0;
        var ang = 0;
        if (isiOS) {
            var r0 = r - lib.flexible.rem2px(0.213); // 时刻度长度 越小越长 
            var r1 = r - lib.flexible.rem2px(0.213); //分刻度长度 越小越长
        } else if (isAndroid) {
            var r0 = r - lib.flexible.rem2px(0.8); // 时刻度长度 越小越长 
            var r1 = r - lib.flexible.rem2px(0.8); //分刻度长度 越小越长
        }
        var x00 = 0;
        var y00 = 0;
        var arry = [];

        for (var index = 0; index < 60; index++) {
            ang = -90 + 360 / 60 * index;
            // if (index % 5 == 0) {
            //     continue; //跳过时刻度
            // }
            x1 = x0 + r * Math.cos(ang * Math.PI / 180);
            y1 = y0 + r * Math.sin(ang * Math.PI / 180);
            // console.log(x1 + "," + y1)

            x01 = x00 + r1 * Math.cos(ang * Math.PI / 180);
            y01 = y00 + r1 * Math.sin(ang * Math.PI / 180);
            // console.log(x01 + "," + y01)

            var line = clock.graphics;
            // line.beginStroke("#dde0e3");
            if ((ang + 90) / 360 >= rate && first == 1) {
                line.beginStroke("#0094ff");
            } else if ((ang + 90) / 360 >= rate && first == 2) {
                line.beginStroke("#dde0e3");
                continue;
            }
            if (isiOS) {
                line.setStrokeStyle(3).moveTo(x1, y1).lineTo(x01, y01);
            } else if (isAndroid) {
                line.setStrokeStyle(4).moveTo(x1, y1).lineTo(x01, y01);
            }
            if (first == 1) {
                gArr.push(line);  //第一次绘制刻度圆 每条刻度添加至数组内，第二次绘制 刻度时，每次绘制的新刻度，清除对应的原刻度
            }else{
                stage.removeChild(gArr[index]);
            }
        }
        clock.x = position;
        clock.y = position;
        stage.addChild(clock);
        $(".bidMsg").show();
        stage.alpha = 1;
        stage.update();
    }
})

//进度圆
        seajs.use(\'easel\', function() {
            require(\'module/bid/content/drawCircle\').init();
        })

还需引入easel.js

https://cdn.bootcss.com/EaselJS/0.8.0/easeljs.min.js