利用Konva封装简易的进度条

最新推荐文章于 2024-06-14 11:02:57 发布

TanJ2014

最新推荐文章于 2024-06-14 11:02:57 发布

阅读量356

点赞数 1

分类专栏： HTML/CSS/JS canvas 文章标签： Konva canvas

本文链接：https://blog.csdn.net/sinat_36014216/article/details/102456324

版权

HTML/CSS/JS 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

canvas

2 篇文章 0 订阅

订阅专栏

利用Konva库封装了一个简单的进度条函数tjProgressBar，效果如下：

主要是引入Konva.js与tjProgressBar.js后，在页面中直接初始化一个tjProgressBar对象即可创建一个进度条。

new tjProgressBar({
	x:100, 
	y:100, 
	w:600, //进度条的宽度
	h:30 //进度条的高度
});

具体代码如下：

html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>进度条</title>
	<style>
		*{
			padding: 0;
			margin:0;
		}
	</style>
	<script src="js/konva.js"></script>
	<script src="tjJs/tjProgressBar.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 pBar = new tjProgressBar({
			x:100,
			y:100,
			w:600,
			h:30
		});
		pBar.addGroupOrLayer(layer);
		pBar.changeWidth(.8);
		layer.draw();

	</script>
</body>
</html>

tjProgressBar.js

function tjProgressBar(option){
	this._init(option);
}
tjProgressBar.prototype = {
	_init:function(option){
		this.x = option.x || 0;
		this.y = option.y || 0;
		this.w = option.w || 0;
		this.h = option.h || 0;

		this.fillStyle = option.fillStyle || "#07B0FA"; //进度条颜色
		this.strokeStyle = option.strokeStyle || "#E5E6EA"; //进度条边框颜色

		this.group = new Konva.Group({
			x:0,
			y:0
		});
		var strokeW = 10; //边框的宽度
		var outerRect = new Konva.Rect({
			x:this.x,
			y:this.y,
			width:this.w,
			height:this.h,
			stroke:this.strokeStyle,
			fill:"#B3B2B0",
			strokeWidth:strokeW,
			cornerRadius:1/2*this.h
		});
		this.group.add(outerRect);

		var innerRect = new Konva.Rect({
			x:this.x+strokeW/2,
			y:this.y+strokeW/2,
			width:0,
			height:this.h-strokeW,
			fill:this.fillStyle,
			cornerRadius:1/2*this.h,
			id:"innerRect"
		});
		this.group.add(innerRect);
	},
	//动画：改变innerRect中Width的值
	changeWidth:function(value){
		if(value>1){
			value = value/100;
		}
		var width = value*this.w;
		var innerRect = this.group.findOne("#innerRect");
		innerRect.to({
			width:width,
			duration:.3,
			easing:Konva.Easings.EasIn
		});
	},
	
	addGroupOrLayer:function(arg){
		arg.add(this.group);
	}
}

Konva可以去其官网下载：

https://konvajs.org/

TanJ2014

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
利用Konva封装简易的进度条

利用Konva库封装了一个简单的进度条函数tjProgressBar，效果如下：主要是引入Konva.js与tjProgressBar.js后，在页面中直接初始化一个tjProgressBar对象即可创建一个进度条。new tjProgressBar({ x:100, y:100, w:600, //进度条的宽度 h:30 //进度条的高度});具体代码如下：htm...
复制链接

扫一扫