本文共 13704 字，大约阅读时间需要 45 分钟。

面向对象版本的进度条

function ProgressBar( option ) {	//new 构造函数执行的时候，调用 内部的初始化方法。	this._init( option );}ProgressBar.prototype = {	//类初始化的时候：创建内部矩形，　外部矩形，然后把两个矩放到goroup里面去。	_init: function( option ) {		this.x = option.x || 0;	//进度条的x坐标		this.y = option.y || 0; // 进度条的y坐标		this.w = option.w || 0; //进度条的宽度		this.h = option.h || 0; //进度条的高度		this.fillStyle = option.fillStyle || 'red';		this.strokeStyle = option.strokeStyle || 'red';		//定义的内部的进度条的矩形		var innerRect = new Konva.Rect({			x: this.x, 				// stage.width(),获得舞台的宽度，  x：设置当前矩形x坐标			y: this.y,			width: 0, 				//设置矩形的宽度			height: this.h, 		//设置矩形的高度			fill: this.fillStyle,	//设置矩形的填充的颜色			cornerRadius: 1/2 * this.h, //设置进度条的圆角。			id: 'innerRect',		//设置当前矩形的ID，以便于后面进行使用ID选择器			name: 'ss'				//设置name,方便后面用类选择器。		});		this.innerRect = innerRect;		//添加一个外边框的 矩形		var outerRect = new Konva.Rect({			x: this.x, 				// stage.width(),获得舞台的宽度，  x：设置当前矩形x坐标			y: this.y,			width: this.w, 			//设置矩形的宽度			height: this.h, 		//设置矩形的高度形的高度			stroke: this.strokeStyle, // 设置了stroke那么，矩形就进行描边			strokeWidth: 4,			 // 设置边框的宽度，			cornerRadius: 1/2* this.h,		});		//html : 		// 创建一个组， 相当于html中的父盒子。		this.group  = new Konva.Group({			x: 0,			y: 0		});		this.group.add( innerRect );//把内部的矩形放到组中		this.group.add( outerRect );	},	//此方法是将 用户传进来的需要改变的进度 运行动画	changeValue: function( val ) {		//传进来的进度		if( val > 1 ) { //   1 - 100   vs   0 -1     =>0.5			val = val /100;		}		//做动画 val = .3 .7		var width = this.w * val; //最终进度条内部矩形的 宽度。		// 通过id选择器去查找内部的子元素。		var innerRect = this.group.findOne('#innerRect');		// var innerRect = this.group.findOne('Rect');		var innerRect = this.innerRect;				// to动画系统： 让我们的物件 变换到某个状态		// 让我们的 物件从 当前状态 到  下面设置的状态，		innerRect.to({			width: width,			duration: .3,			easing: Konva.Easings.EasIn		});	},	// arg： 传进来的层或者 是组，	//此方法是：把当前创建的进度条　添加到　层中。	addToGroupOrLayer: function( layer ) {		layer.add( this.group );	}}

面向对象版本的Webitcast

function CircleText( option ) {	this._init( option );//构造函数默认执行初始化工作}CircleText.prototype = {	_init: function( option ) {		this.x = option.x || 0;		//圆形组的中心点坐标		this.y = option.y || 0;		this.innerRadius = option.innerRadius || 0;		//内圆半径		this.outerRadius = option.outerRadius || 0;		this.text = option.text || 'canvas';			//圆内的文字		this.innerStyle = option.innerStyle || 'red';	//内圆的填充样式		this.outerStyle = option.outerStyle || 'blue';	//外圆的填充样式		//创建文字和圆形的一个组		this.group = new Konva.Group({				x: this.x,  //设置组的x，y坐标后，所有的内部元素按照组内的新坐标系定位。			y: this.y,		});		//初始化一个内部圆		var innerCircle = new Konva.Circle({	//创建一个圆			x: 0,				y: 0,			radius: this.innerRadius,  //圆的半径			fill: this.innerStyle,		//圆的填充颜色			opacity: .8		});		//把内部圆，添加到组内		this.group.add( innerCircle );		//初始化一个圆环		var outerRing = new Konva.Ring({	//初始化一个圆环			x: 0,			y: 0,			innerRadius: this.innerRadius,	//内圆的半径			outerRadius: this.outerRadius,  //外圆的半径			fill: this.outerStyle,			//圆环的填充的样式			opacity: .3						//透明度		});		//把外环，添加到组内		this.group.add( outerRing );		//初始化一个文字		var text = new Konva.Text({			x: 0 - this.outerRadius,			y: -7,			width: this.outerRadius * 2,//文字的宽度			fill: '#fff',			    //文字的颜色			fontSize: 17,				//文字的大小			text: this.text,			//文字的内容			align: 'center',			//居中显示			fontStyle: 'bold'			//字体加粗		});		//把文字添加到组内		this.group.add( text );	},	//把 组添加到层或者其他组中。	addToGroupOrLayer: function( arg ) {		arg.add( this.group );	}}

面向过程版本的柱状图

// Histogram：柱状图的意思 英 ['hɪstəgræm]  美 ['hɪstəɡræm]function HistogramChart( option ) {	// zzt	this._init( option );	// JQJB:警情级别}HistogramChart.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.data = option.data || [];		var x0 = 0;		var y0 = 0;		// 柱状图中所有的元素的组		this.group = new Konva.Group({			x: this.x,			y: this.y		});		//放矩形的组		this.rectGroup = new Konva.Group({			x: 0,			y: 0		});		this.group.add( this.rectGroup );		//添加一个放百分比文字的组		this.textPercentGroup = new Konva.Group({			x: 0,			y: 0		});		this.group.add( this.textPercentGroup );		//初始化底线		var bsLine = new Konva.Line({			//x:从 1/8 x,  3/4			//y: 3/4 高度处			points: [x0,y0, x0+this.w, y0], //要求 底线按照画布的左上角顶点进行定位。			strokeWidth: 1,			stroke: 'lightgreen',		});		this.group.add( bsLine );		var rectWidth = this.w / this.data.length; //每个矩形占用的总宽度		var height = this.h;		var self = this;// 当前柱状图的对象		//初始化 矩形		//初始化 文字%		//初始化 底部文字		this.data.forEach(function(item, index) {// item:数组中元素，index是索引值			//生成一个矩形			var rect = new Konva.Rect({				x: x0 + (1/4 + index ) * rectWidth,//				y: y0 - item.value * height,				width: 1/2 * rectWidth,				height: item.value * height,				fill: item.color,				opacity: .8,		 //设置透明度				cornerRadius: 10,	 //设置圆角				shadowBlur: 10,		  //设置阴影的模糊级别				shadowColor: 'black',//设置阴影的颜色				// shadowOffsetX: 4, //设置阴影的X偏移量				// shadowOffsetY: 4	 //设置应用的Y偏移量			});			self.rectGroup.add( rect );			//把百分比的文字放到 柱状图的顶部			var text = new Konva.Text({				x: x0 + (index ) * rectWidth,//				y: y0 - item.value * height - 14,				fontSize: 14,				text: item.value * 100 + '%',				fill: item.color,				width: rectWidth,// 配合让文字居中				align: 'center',  //				name: 'textPercent'  //设置文字的name后，可以通过类选择器进行选取。			});			self.textPercentGroup.add( text );			//把百分比的文字放到 柱状图的顶部			var textBottom = new Konva.Text({				x: x0 + (1/4 + index ) * rectWidth,//				y: y0,				fontSize: 14,				text: item.name,				fill: item.color,				// width: rectWidth,// 配合让文字居中				// align: 'center',  //				rotation: 30			});			self.group.add( textBottom );		});	},	addToGroupOrLayer: function( arg ) {		arg.add( this.group );	},	playAnimate: function() {		var self = this;		// 让柱状图 y→ y0  height：0		this.rectGroup.getChildren().each(function(item, index){			item.y(0);			item.height(0);			//经过一个动画还原			item.to({				duration: 1,				y: - self.data[index].value * self.h,				height: self.data[index].value * self.h			});		});		//让文字有个动画		this.textPercentGroup.getChildren().each(function( item, index ){			item.y(-14);			item.to({				duration: 1,				y: - self.data[index].value * self.h -14			});		});	}}

面向过程的饼状图

//英 [paɪ]  美 [paɪ]function PieChart( option ) {	this._init( option );}PieChart.prototype = {	_init: function( option ) {		this.x = option.x || 0;		this.y = option.y || 0;		this.r = option.r || 0;		this.data = option.data || [];		//饼状图所有的 物件的组		this.group = new Konva.Group({			x: this.x,			y: this.y		});		//饼状图：所有的 扇形的组		this.wedgeGroup = new Konva.Group({			x: 0,			y: 0		});		//饼状图： 所有的文字的组		this.textGroup = new Konva.Group({			x: 0,			y: 0		});		this.group.add( this.wedgeGroup );		this.group.add( this.textGroup );		var self = this;		var tempAngel = -90;//从-90开始绘制		this.data.forEach(function(item, index ) {			//把每条数据创建成一个扇形			var angle = 360 * item.value;//当前扇形的角度			//创建一个扇形			var wedge = new  Konva.Wedge({				x: 0,		//扇形圆心坐标				y: 0,				angle: angle ,	//扇形的角度				radius: self.r,	//扇形的半径				fill: item.color,	//扇形的填充颜色				rotation: tempAngel //扇形的旋转角度			});			self.wedgeGroup.add( wedge );			//绘制文本的 角度			var textAngle = tempAngel + 1/2 * angle;			//绘制的 百分比的文本			var text = new Konva.Text({				x: (self.r+20) * Math.cos(Math.PI/ 180 * textAngle ),				y: (self.r+20) * Math.sin(Math.PI/ 180 * textAngle ),				text: item.value*100 +'%',				fill: item.color			});			//根据角度判断设置文字的 位置			if(  textAngle > 90 && textAngle < 270 ) {				//让文本向左边 移动文字宽度的位置。				text.x( text.x() - text.getWidth() );			}			self.textGroup.add( text );						tempAngel += angle;		});		//绘制所有的楔形		//绘制文字		//绘制圆环的线		var cir = new Konva.Circle({			x: 0,			y: 0,			radius: this.r+10,			stroke: '#ccc',			strokeWidth: 2		});		this.group.add( cir );		this._animateIndex = 0;	},	playAnimate: function() {		var self = this;		//根据索引显示动画		//把所有扇区 角度设置为0		if( this._animateIndex == 0 ) {			//拿到所有的 扇形			this.wedgeGroup.getChildren().each(function(item, index ){				item.angle(0);			});		}		//展示当前索引对应的动画	 	var item = this.wedgeGroup.getChildren()[this._animateIndex];	 	item.to({	 		angle: this.data[this._animateIndex].value * 360,	 		duration: 2 * this.data[this._animateIndex].value,	 		onFinish: function() {	 			self._animateIndex ++;	 			if( self._animateIndex >= self.data.length) {	 				self._animateIndex = 0;//让他的索引再回到0	 				//************************重点***********************	 				return;// 会把整个递归执行完成。	 			}	 			//继续执行当前方法，播放下一个动画	 			self.playAnimate();	 		}	 	});	},	//把饼状图添加到层里面的方法	addToGroupOrLayer: function( arg ) {		arg.add( this.group );	}}

//ItcastScence.js// 场景类function ItcastScene( options ) {    // 场景所属的舞台    this.stage = options.stage;    //执行场景的初始化    this.init = options.init || ItcastScene.voidFn;    //执行场景的进场动画    this.pre = options.pre || ItcastScene.voidFn;    //执行场景的出场动画    this.post = options.post || ItcastScene.voidFn;    //当前场景的所有的层    this.layers = options.layers || [new Konva.Layer()];    this.name = options.name || '';    this.init();}ItcastScene.prototype = {	constructor: ItcastScene,	voidFn: function() {},    //当前场景	CurrentScence: null,	//场景要进入舞台，只需要调用场景的 play方法。	play: function () {        var self = this;                // doPre,	    var doPre = function doPre() {            // 把当前场景中的所有的层添加到舞台            self.layers.forEach(function( val ){                self.stage.add( val );            });            //设置当前场景为 this            ItcastScene.currentScene = self;            //执行当前场景的入场动画            self.pre();        };        //如果不是第一个场景，先执行当前场景的出场动画，        //然后执行下一个场景的入场动画        //需要在场景的post方法中执行传进去的 next 方法。        if (ItcastScene.currentScene) {            //执行上一个场景的出场动画            ItcastScene.currentScene.post(doPre);        } else {            //如果是第一个场景直接执行入场动画            doPre();        }    }// play};

//weixin.jsvar stage = new Konva.Stage({	container: 'container',	width: window.innerWidth,//全屏	height: window.innerHeight});// 总的思路：//上滑：  让索引+1， 执行sceneBuilders数组中下一个场景的play（）//下滑：  让索引-1， 执行sceneBuilders数组中下一个场景的play（）// 场景的构造器var sceneBuilders = [ builderHtml5Scene, builderC3Scene, builderDemoScene ];//当前场景的执行的索引var sceneIndex = 0;//上来之后执行第一个场景sceneBuilders[0]().play();//构造h5的场景function builderHtml5Scene() {	var bgLayer = new Konva.Layer();	var animateLayer = new Konva.Layer();	var lightLayer = new Konva.Layer();	var rect = new Konva.Rect({		x: -100,		y: -100,		fill: 'red',		width: 100,		height: 100	});	return new ItcastScene({		name: '场景1',		layers: [bgLayer, animateLayer, lightLayer], //最后的层放到最上面		stage: stage,		init: function() {			//初始化场景中的所有形状			animateLayer.add(rect);			this.layers.forEach(function(layer) {				layer.draw();			});		},		pre: function() {			rect.to({				x: 100,				y: 100,				duration: 1,				scaleX: 2,				scaleY: 2,				opacity: .4			});		},		post: function( dopre ) {			var self = this;			rect.to({				x: -100,				y: -100,				duration: 1,				scaleX: 2,				scaleY: 2,				opacity: .4,				onFinish: function() {					self.layers.forEach(function(item) {						item.destroy();//把所有层销毁					});					dopre(); //必须执行next方法，执行下一个场景的初始化和入场动画				}			});		}	});}//构造c3的场景function builderC3Scene() {	var bgLayer = new Konva.Layer();	var animateLayer = new Konva.Layer();	var lightLayer = new Konva.Layer();	var rect = new Konva.Rect({		x: -100,		y: -100,		fill: 'green',		width: 100,		height: 100	});	//柱状图的数据		var data = [			{ name: '前端', value: '.8', color: 'green'},			{ name: 'PHP', value: '.3', color: 'blue'},			{ name: 'Java', value: '.7', color: 'red'},			{ name: 'UI', value: '.9', color: 'orange'},			{ name: 'IOS', value: '.4', color: 'purple'},			{ name: 'Android', value: '.9', color: 'pink'}		];		var h  = new HistogramChart({			x: 1/8 * stage.width(),			y: 3/4 * stage.height(),			w: 3/4 * stage.width(),			h: 1/2 * stage.height(),			data: data		});	return new ItcastScene({		name: '场景2',		layers: [bgLayer, animateLayer, lightLayer], //最后的层放到最上面		stage: stage,		init: function() {			//初始化场景中的所有形状			animateLayer.add(rect);			h.addToGroupOrLayer( animateLayer );			this.layers.forEach(function(layer) {				layer.draw();			});		},		pre: function() {			rect.to({				x: 100,				y: 100,				duration: 1,				scaleX: 2,				scaleY: 2,				opacity: .4,				yoyo: true			});			h.playAnimate();		},		post: function( dopre ) {			this.layers.forEach(function(item) {				item.destroy();			});			dopre(); //必须执行next方法，执行下一个场景的初始化和入场动画		}	});}//构造demo的场景function builderDemoScene() {	return new ItcastScene({	});}//给舞台添加 上滑动，和下滑动的事件function addStageEvent() {	var startY  = 0;	var endY = 0;	stage.on('contentMousedown contentTouchstart', function( e ) {		if( e.type == 'contentMousedown' ) {			// console.log(e.evt.screenX + ' ' +  e.evt.screenY);			startY = e.evt.screenY;		}else if( e.type == 'contentTouchstart'){			// console.log(e.evt.touches[0].screenX + ' ' + e.evt.touches[0].screenY);			startY = e.evt.touches[0].screenY;		}		// console.log(e);	});	stage.on('contentMousemove contentTouchmove', function( e ) {		if( e.type == 'contentMousemove' ) {			// console.log(e.evt.screenX + ' ' +  e.evt.screenY);			endY = e.evt.screenY;		}else if( e.type == 'contentTouchmove') {			// console.log(e.evt.touches[0].screenX + ' ' + e.evt.touches[0].screenY);			endY = e.evt.touches[0].screenY;		}		// console.log(e);	});	stage.on('contentMouseup contentTouchend', function( e ) {		if( endY > startY ) {			//把当前执行场景的索引-1			//下滑动 执行上一个场景 的play()			sceneIndex = sceneIndex <= 0 ? 0 : sceneIndex -1;		}else {			//执行下一个场景的 play();			//把当前执行场景的索引 +1			// 0 1 2    1 2   length=3			sceneIndex = sceneIndex >= sceneBuilders.length-1 ? sceneBuilders.length-1 : sceneIndex +1;		}		sceneBuilders[ sceneIndex ]().play();	});}//给舞台添加滑动的事件addStageEvent();