利用面向对象思想封装Konva动态进度条
1.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>02面向对象版本的进度条</title>
<style>
body {
padding: 0;
margin: 0;
background-color: #f0f0f0;
overflow: hidden;
}
</style>
<script src="konva.js"></script>
<script src="progressBar.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 cenX = stage.width() / 2;
var cenY = stage.height() / 2;
var option = {//把参数设置成对象形式；
x: 1/8 * stage.width(), //进度条x坐标
y: 1/2 * stage.height(), //进度条y坐标
w: 3/4 * stage.width(), //进度条的宽度
h: 1/12 * stage.height(), //进度条的高度
fillStyle: 'red', //进度条内部矩形的填充的颜色
strokeStyle: 'blue' //进度条的外边框的颜色
};
// 创建进度条对象实例；在new的时候调用初始化值；
var p = new ProgressBar( option );
//把进度条放到 层中
p.addToGroupOrLayer( layer );
//渲染层
layer.draw();
p.changeValue( .5 );
</script>
</body>
</html>
2.js代码：
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 );
}
}
利用面向对象思想封装Konva动态进度条的更多相关文章
- bootstrap得动态进度条
Bootstrap的动态进度条: html: 创建一个modal 这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单 <div class=" ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- Qt实现炫酷启动图-动态进度条
目录 一.简述 二.动效进度条 1.光效进度条 2.延迟到达进度条 3.接口说明 三.启动图 1.实现思路 2.背景图切换 四.测试 1.构造启动图 2.背景图 3.其他信息 4.事件循环 五.源码 ...
- 超简单CSS3水平动态进度条+小圆球+背景色渐变
实现的的效果图如下:效果是动态加载的 代码如下: <!DOCTYPE html> <html lang="en"> <head> <met ...
- 使用Konva创建进度条
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- bootstrap与jQuery结合的动态进度条
此款进度条实现的功能: 1.利用了bootstrap的进度条组件. a.在最外层的<div>中加入class .progress,在里层<div>加入class .progre ...
- Vue实现mp3音乐播放及动态进度条
今天碰到一个Vue点击mp3播放及进度条动态走动的小功能,记录一下: 首先是通过HTML5 audio标签引入音频: <template> <div class="x-fo ...
- 使用面向对象思想封装js（附实例）
平时在写js时应该用面向对象思想将每一组功能封装成一个模块,可实现模块间的高内聚低耦合.重用.结构清晰........... 如果页面中逻辑复杂.功能多,不使用模块封装是不可想象的,维护起来非常复杂. ...
- 利用CoreAnimation实现一个时间的进度条
(个人原创,转载请注明出处 http://www.cnblogs.com/pretty-guy/p/7460334.html) 在iOS中实现进度条通常都是通过不停的设置progress来完成的,这样 ...
随机推荐
- 解决 在POM配置Maven plugin提示错误“Plugin execution not covered by lifecycle configuration”
eclipse在其POM文件的一处提示出错如下: Plugin execution not covered by lifecycle configuration: org.apache.maven.p ...
- Oracle 12c CDB PDB
先说基本用法: 先按11G之前进行 conn / as sysdba; create user test identifed by test; ORA-65096: 公用用户名或角色名无效. 查官方文 ...
- 让一个表单以post的方式在window.open的窗口中打开
我们都知道window.open(url)是最基本的用法,很多人都在url里用?xx=11&yy=22的方式拼接参数,但是其实我们不愿意让使用者看到后面的参数,这时我们可以如下方法 JS如下: ...
- python之函数用法__setattr__
# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法__setattr__ #http://www.cnblogs.com/hongfei ...
- 新浪API及调用案例
百度分享:http://pan.baidu.com/s/1uSmku
- MyEclipse下的Debug调试技巧汇总
首先以debug模式启动tomcat,并文件中设断点,然后运行,当程序走到断点处就会转到debug视图下 [1]快捷键(F8)直接执行程序. [2]快捷键(F5)单步执行程序,遇到方法时进入. [3] ...
- Java中初级数值类型的大小, volatile和包装类wrapped type的比较
Java中的初级数值类型 Java是静态类型语言, 所有的变量必须先声明再使用. 其初级类型一共8种: boolean: 数据只包含1bit信息, 但是占空间为8-bit, 默认值为false byt ...
- 【云栖大会】阿里巴巴集团CTO张建锋:用计算和数据去改变整个世界
摘要: 当浩瀚的数字化信息能够联网在线,在万物互联网的新世界中,所有东西都可能有感知.变智能,想象一下电表.冰箱.心电图监测仪等设备的信息都能数字化并联网,从城市管理到个人生活,都会迎来翻天覆地的变化 ...
- shell脚本死循环判断nginx日志reqest_time时间大于3秒是否增加，若增加发送相关日志信息到开发人员
#!/bin/bash while [ 1 ] do pre_request_time_count=`cat /var/log/nginx/access.log |awk '{print $NF}'| ...
- HDUOJ-----1098 Ignatius's puzzle
Ignatius's puzzle Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...