var TimeLine = function (_id) {
this.id = _id;
this._top = 40;
this.vHeight = 40;
this.global_top = 40;
this.line_height = 4;
this.radius = 6;
this.startPosition = 6;
this.text_top = 40;
this.text_margin = 20;
this.text_left = [6, 15];
this.canvas = null;
this.totalWidth = 0;
this.totalHeight = 0;
this.context = null;
this.stepPosition = 100;
this.font = "bold 35px sans-serif";
this.Init();
}; TimeLine.prototype = {
Init: function () {
this.canvas = document.getElementById(this.id);
if (this.canvas == null) {
return false;
} this.totalWidth = this.canvas.clientWidth * 0.95;
this.totalHeight = this.canvas.clientHeight;
this.stepPosition = 0.1 * this.totalWidth;
this.global_top = 0.1 * this.totalHeight;
this.vHeight = 0.1 * this.totalHeight;
this.text_margin = 0.06 * this.totalHeight;
this.radius = 0.01 * this.totalHeight;
this.text_left = [0.01 * this.totalHeight, 0.01 * this.totalWidth];
this.startPosition = 0.02 * this.totalWidth; this.context = this.canvas.getContext("2d");
//每次重绘前清空
this.context.clearRect(0, 0, this.totalWidth, this.totalHeight);
}, /**
*strDate:时间
*strContent:显示文本
*direction:走势,0水平,1垂直,-1结束
*status:状态,1,2已完成,0未完成
*/
AddEvent: function (strDate, strContent, direction, status) {
if (this.canvas == null) {
return false;
}
var okColor = 'green', onColor = 'gray';
var passColor = "rgba(0,255,0,0.5)", waitColor = "rgba(99,99,99,0.5)";
var passStrokeColor = "green", waitStrokeColor = "rgba(99,99,99,0.5)";
if (direction == 0) {
this.stepPosition = strContent.length * 6;
if (this.stepPosition < 0.20 * this.totalWidth) this.stepPosition = 0.20 * this.totalWidth;
//设置透明度实践证明透明度值>0,<1值越低,越透明,值>=1时为纯色,值<=0时为完全透明
this.context.fillStyle = ((status == 1 || status == 2) ? passColor : waitColor);
this.context.fillRect(this.startPosition + this.radius, this.global_top, this.stepPosition, this.line_height); //设置新图形(红色圆形)
this.context.beginPath();
this.context.fillStyle = ((status == 1 || status == 2) ? okColor : onColor);
this.context.arc(this.startPosition + this.line_height / 2, this.global_top + this.line_height / 2, this.radius, 0, Math.PI * 2, false);
this.context.fill();
this.context.fillStyle = ((status == 1 || status == 2) ? okColor : onColor);
this.context.font = this.font;
//this.text_top=this.global_top+this.line_height+this.text_margin;
this.text_top = this.text_margin;
//context.strokeStyle = ((status==1||status==2)?passStrokeColor:waitStrokeColor);
//context.strokeText(strContent,this.startPosition+text_left[0],this.text_top);
this.context.fillText(strContent, this.startPosition + this.text_left[0], this.text_top);
this.context.fillText(strDate, this.startPosition + this.text_left[0], this.global_top + this.text_top + 10);
this.startPosition += this.stepPosition;
}
else if (direction == 1) {
stepPosition = 50;
//设置透明度实践证明透明度值>0,<1值越低,越透明,值>=1时为纯色,值<=0时为完全透明
this.context.fillStyle = ((status == 1) ? passColor : waitColor);
this.context.fillRect(this.startPosition, this.vHeight + this.radius + this.line_height / 2, this.line_height, this.stepPosition * 0.2);
this.vHeight += this.stepPosition * 0.2;
this._top += +this.stepPosition * 0.2;
//设置新图形(红色圆形)
this.context.beginPath();
this.context.fillStyle = ((status == 1) ? okColor : onColor);
this.context.arc(this.startPosition + this.line_height / 2, this.vHeight + this.line_height / 2, this.radius, 0, Math.PI * 2, false);
this.context.fill();
this.context.fillStyle = ((status == 1) ? okColor : onColor);
this.context.font = this.font;
this.text_top = this._top + this.line_height / 2;
//this.context.strokeStyle = ((status==1)?passStrokeColor:waitStrokeColor);
//this.context.strokeText(strDate+' '+strContent,this.startPosition+text_left[1],this.text_top);
this.context.fillText(strDate + ' ' + strContent, this.startPosition + this.text_left[1], this.vHeight + 10);
//this.context.fillText(strContent,this.startPosition+this.text_left[1],this.text_top+this.text_margin);
}
else if (direction == -1) {
//设置透明度实践证明透明度值>0,<1值越低,越透明,值>=1时为纯色,值<=0时为完全透明
this.context.fillStyle = ((status == 1 || status == 2) ? passColor : waitColor);
this.context.fillRect(this.startPosition + this.radius, this.global_top, this.stepPosition * 0.7, this.line_height);
//设置新图形(红色圆形)
this.context.beginPath();
this.context.fillStyle = ((status == 1 || status == 2) ? okColor : onColor);
this.context.arc(this.startPosition + this.line_height / 2 + this.stepPosition * 0.7 + this.radius, this.global_top + this.line_height / 2, this.radius, 0, Math.PI * 2, false);
this.context.fill();
this.context.fillStyle = ((status == 1 || status == 2) ? okColor : onColor);
this.context.font = this.font;
this.text_top = this.text_margin;
//context.strokeStyle = ((status==1||status==2)?passStrokeColor:waitStrokeColor);
//context.strokeText(strContent,this.startPosition+this.text_left[0]+this.stepPosition*2.5,this.text_top);
this.context.fillText(strContent, this.startPosition + this.text_left[0] + this.stepPosition * 0.4, this.text_top);
this.context.fillText(strDate, this.startPosition + this.text_left[0] + this.stepPosition * 0.4, this.global_top + this.text_margin + 10);
}
}
};

制作TimeLine物流信息展示效果的更多相关文章

  1. Photoshop将普通照片快速制作二次元漫画风格效果

    今天为大家分享Photoshop将普通照片快速制作二次元漫画风格效果,教程很不错,对于喜欢漫画的朋友可以参考本文,希望能对大家有所帮助! 一提到日本动画电影,大家第一印象肯定是宫崎骏,但是日本除了宫崎 ...

  2. Simptip – 使用 Sass 制作的 CSS Tooltip 效果

    Simptip 是一个简单基于 Sass 的 CSS 工具提示效果.帮助你在网站中加入在不同的方向(上.左.右.下)的工具提示,也可以设置不同的颜色如成功.信息.警告和危险.最后还有其他特性如软边.半 ...

  3. Elastislide - 响应式的图片循环展示效果

    Elastislide 是一款非常优秀的响应式 jQuery 图片循环展示(旋转木马)插件,集成了 Touchwipe 插件以支持触屏设备.提供了四种效果:水平图片传送带.垂直图片传送带.固定在屏幕底 ...

  4. 利用TabHost制作QQ客户端标签栏效果(低版本QQ)

    学习一定要从基础学起,只有有一个好的基础,我们才会变得更加的perfect 下面小编将利用TabHost制作QQ客户端标签栏效果(这个版本的QQ是在前几年发布的)…. 首先我们看一下效果: 看到这个界 ...

  5. JS实现有点炫的图片展示效果-图片解体和组合

    经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...

  6. 响应式的dribbble作品集魔术布局展示效果

    在线演示1 本地下载 相信做设计的朋友肯定都知道dribbble.com,它是一个非常棒的设计师分享作品的网站,全世界数以万计的设计高手和行家都在这个网站上分享自己的作品,当然,如果你常在上面闲逛的话 ...

  7. jQuery制作Web全屏效果

    需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...

  8. CSS3 实现六边形Div图片展示效果

    原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...

  9. cesium 之地图切换展示效果篇(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

随机推荐

  1. ADSL_自动拨号源码(Delphi),已经测试通过

    下载地址: http://files.cnblogs.com/lwm8246/ADSL_%E8%87%AA%E5%8A%A8%E6%8B%A8%E5%8F%B7.rar

  2. poj 3111 卖珠宝问题 最大化平均值

    题意:有N件分别价值v重量w的珠宝,希望保留k件使得 s=v的和/w的和最大 思路:找到贡献最大的 设当前的s为mid(x) 那么贡献就是 v-w*x 排序 ,取前k个 bool operator&l ...

  3. PHP.20-图片上传下载

    图片上传下载 思路: 1.创建图片上传的存放目录 /uploads/ 2.index.php //浏览页面,提供上传表单 上传表单:文件上传必须使用enctype="multipart/fo ...

  4. spring boot 入门1-----如何使用@Value注解读取配置文件以及使用@ConfigrationProperties注解

    读取.yml文件属性值的方式 1)如何将配置文件中的属性值与字段匹配起来 @Value("${配置文件中属性的名}") 在application.yml文件中 server: po ...

  5. 修改window 10 开始菜单问题

    cmd->powershell Get-AppxPackage | % { Add-AppxPackage -DisableDevelopmentMode -Register "$($ ...

  6. git bash中文显示为数字

    转自:http://blog.csdn.net/zhujiangtaotaise/article/details/74424157 今天让去做一个另外一个项目,导入项目后,git status 发现原 ...

  7. 【LeetCode】Swap Nodes in Pairs(两两交换链表中的节点)

    这是LeetCode里的第24题. 题目要求: 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 示例: 给定1->2->3->4, 你应该返回2->1->4- ...

  8. EK算法模板

    #include<stdio.h> #include<string.h> #include<iostream> #include<algorithm> ...

  9. SQL视频总结

    SQL是英文Structured Query Language的缩写,意思为结构化查询语言. SQL语言的主要功能就是同各种数据库建立联系,进行沟通.SQL被作为关系型数据库管理系统的标准语言. SQ ...

  10. (总结)Linux服务器上最简单的Nginx反向代理配置

    Nginx不但是一款高性能的Web服务器,也是高性能的反向代理服务器.下面简单说说Nginx的反向代理功能. 反向代理是什么? 反向代理指以代理服务器来接受Internet上的连接请求,然后将请求转发 ...