面向对象canvas_进度条-Konva.js

最新推荐文章于 2024-08-16 09:45:57 发布

吃瓜群众欢乐多

最新推荐文章于 2024-08-16 09:45:57 发布

阅读量1.1k

点赞数

分类专栏： WEB、HTML 文章标签： canvas 面向对象

本文链接：https://blog.csdn.net/sinat_36146776/article/details/53324367

版权

WEB、HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

效果图如下：

html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>01进度条案例</title>
	<style>
		body {
			padding: 0;
			margin: 0;
			background-color: #f0f0f0;
			overflow: hidden;
		}
	</style>
	<script src="bower_components/konva/konva.js"></script>
	<script src="js/zxjstage.js"></script>
</head>
<body>
	<!-- 存放canvas画布的容器 ，这个必须要有 -->
	<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 option={
			x: 1/8 * stage.width(),		//进度条x坐标
			y: 1/2 * stage.height(),	//进度条y坐标
			width: 3/4 * stage.width(),		//进度条的宽度
			height: 1/12 * stage.height(),	//进度条的高度
			fill: 'red',			//进度条内部矩形的填充的颜色
			stroke: 'blue',
			strokeWidth: 4
		}
		//将option的内容放入Progress中
		var s=new ProgressBar(option);//新建
		s.addToGroupOrLayer(layer);//调用js中的函数，传值
		//将矩形添加到层上，由于矩形建立在js中，所以必须到js中添加
		/*layer.add(innerRect);//
		layer.add(outerRect);
		function addToGroupOrLayer(layer){
			layer.add(innerRect);
			layer.add(outerRect);
		}*/
		s.changeValue(70);
		layer.draw();	
	</script>
</body>
</html>

javascript

function ProgressBar(option){
	this._init(option);
}
//属性：  width， height ， x， y  ，innerStyle， outerStyle ， cornerRadius
//行为：修改进度条的进度  changeValue( val )     
// 把进度条添加到层：addToGroupOrLayer( arg );
ProgressBar.prototype={
	_init:function(option){
		this.width=option.width;
		this.height=option.height;
		this.x=option.x;
		this.y=option.y;
		this.fill=option.fill;
		this.stroke=option.stroke;
		this.strokeWidth=option.strokeWidth;//线条宽度
		// this.rect=option.rect;//传递过来的矩形

		var innerRect=new Konva.Rect({
			x:this.x,
			y:this.y,
			width:0,
			height:this.height,
			fill:this.fill,//填充色
			cornerRadius: 1/2* this.height,
			id:'innerRect',
			name:'zzz'
		});
		this.innerRect=innerRect;//填充的内部矩形
		var outerRect=new Konva.Rect({
			x:this.x,
			y:this.y,
			width:this.width,
			height:this.height,
			stroke:this.stroke,//框的线条颜色
			cornerRadius: 1/2* this.height
		});
		this.outerRect=outerRect;

		this.Group=new Konva.Group({
			x:0,
			y:0
		});
		this.Group.add(innerRect);//将创建的矩形添加到父盒子Group中，有利于整理当创建多个矩形时调用
		this.Group.add(outerRect);

	},
	addToGroupOrLayer:function(layer){
		layer.add(this.Group);//将父亲盒子Group添加层上去
	},
	changeValue: function( val ) {
		//传进来的进度
		if( val > 1 ) { //   1 - 100   vs   0 -1     =>0.5
			val = val /100;
		}
		//做动画 val = .3 .7
		var width2 = this.width * val; //最终进度条内部矩形的 宽度。

		// 通过“id选择器”去查找内部的子元素。对应innerRect里面的ID
		var innerRect = this.Group.findOne('#innerRect');
		// find:返回一个数组，findOne:返回一个
		//类选择器，可能会查找多个
		// var innerRect = this.Group.findOne('.zzz');
		//标签选择器
		// var innerRect = this.Group.findOne('Rect');
		// 和Jquery中的查找方式很相似
		// var innerRect = this.innerRect;
		
		// to动画系统： 让我们的物件 变换到某个状态
		// 让我们的 物件从 "当前状态 到 下面设置的状态，
		innerRect.to({
			width: width2,
			duration: .3,//当前的状态到宽度为width2的状态，持续0.3秒
			easing: Konva.Easings.EasIn//动画效果
		});

	}
}