knova绘制进度条

Posted alex-xxc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了knova绘制进度条相关的知识，希望对你有一定的参考价值。

效果：

技术分享图片

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>knova绘制进度条</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #f0f0f0;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript" src="konva.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
    var stage = new Konva.Stage({
        container: ‘container‘,
        width: window.innerWidth,
        height: window.innerHeight
    });

    var layer = new Konva.Layer();
    stage.add(layer);

    var progressValueRect = new Konva.Rect({
        x: stage.getWidth() / 8,
        y: stage.getHeight() / 2,
        height: 40,
        width: stage.getWidth() / 8 * 3,
        fill: ‘lightblue‘,
        cornerRadius: 5,
        lineCap: ‘round‘
    });
    layer.add(progressValueRect);


    var progressLine = new Konva.Rect({
        strokeWidth: 5,
        x: stage.getWidth() / 8,
        y: stage.getHeight() / 2,
        height: 40,
        width: stage.getWidth() / 8 * 6,
        stroke: ‘#d0d0d0‘,
        cornerRadius: 5,
        shadowBlur: 4,
        shadowColor: ‘#f0f0f0‘,
        shadowOffset: {x : 0, y : 0},
        shadowOpacity: 0.5
    });
    layer.add(progressLine);

    layer.draw();
    
    layer.draw();

    setInterval(function(){
        if(progressValueRect.width() < progressLine.width() ) {
            progressValueRect.width(progressValueRect.width() + 1);
            layer.batchDraw();
        }
    },20);

    var animate = new Konva.Animation(function(frame){
        var time = frame.time,        //动画执行的时间
            timeDiff = frame.timeDiff,    //上次动画执行到现在的时间
            frameRate = frame.frameRate;    //每秒中执行的帧数
    }, layer);

    animate.start();
</script>
</body>
</html>

 

以上是关于knova绘制进度条的主要内容，如果未能解决你的问题，请参考以下文章

如何重新加载圆形进度条

Seekbar进度drawable异常行为onPause

活动到片段方法调用带有进度条的线程

android 怎么自定义绘制如下图中这种进度条

当片段视图加载是异步任务的一部分时，如何在片段加载之前显示进度条？

自定义对话框片段内的进度条 - 如何从 AsyncTask 传递进度？