//画箭头
var proc={
/**
* 接收canvas对象，并在此上画箭头（箭头起止点已经设置）
* @param context
* @param flag 是否是双箭头
*/
paint:function(context,flag){paint(this,context,flag);},
/**
* 设置箭头起止点
* @param sp起点
* @param ep终点
* @param st强度
*/
set:function(sp,ep,st){init(this,sp,ep,st);},
/**
* 设置箭头外观
* @param args
*/
setPara:function(args){
this.size=args.arrow_size;//箭头大小
this.sharp=args.arrow_sharp;//箭头锐钝
}
};
var init=function(a,sp,ep,st){
a.sp=sp;//起点
a.ep=ep;//终点
a.st=st;//强度
};
var paint=function(a,context,flag){
var sp=a.sp;
var ep=a.ep;
if (context==undefined)
return;
//画箭头主线
context.beginPath();
context.moveTo(sp.x,sp.y);
context.lineTo(ep.x,ep.y);
//画箭头头部
var h=_calcH(a,sp,ep,context);
context.moveTo(ep.x,ep.y);
context.lineTo(h.h1.x,h.h1.y);
context.moveTo(ep.x,ep.y);
context.lineTo(h.h2.x,h.h2.y);
context.stroke();
if(flag){ //双箭头
//另一侧的箭头wlt添加
var h=_calcH(a,ep,sp,context);
context.moveTo(sp.x,sp.y);
context.lineTo(h.h1.x,h.h1.y);
context.moveTo(sp.x,ep.y);
context.lineTo(h.h2.x,h.h2.y);
context.stroke();
}
};
//计算头部坐标
var _calcH=function(a,sp,ep,context){
var theta=Math.atan((ep.x-sp.x)/(ep.y-sp.y));
var cep=_scrollXOY(ep,-theta);
var csp=_scrollXOY(sp,-theta);
var ch1={x:0,y:0};
var ch2={x:0,y:0};
var l=cep.y-csp.y;
ch1.x=cep.x+l*(a.sharp||0.025);
ch1.y=cep.y-l*(a.size||0.05);
ch2.x=cep.x-l*(a.sharp||0.025);
ch2.y=cep.y-l*(a.size||0.05);
var h1=_scrollXOY(ch1,theta);
var h2=_scrollXOY(ch2,theta);
return {
h1:h1,
h2:h2
};
};
//旋转坐标
var _scrollXOY=function(p,theta){
return {
x:p.x*Math.cos(theta)+p.y*Math.sin(theta),
y:p.y*Math.cos(theta)-p.x*Math.sin(theta)
};
};
var Html5Util = function(a){
}
/**
* @param x 圆心x
* @param y 圆心y
* @param r
* @param color 半径
* @param ctx 画笔
*/
Html5Util.prototype.round = function(x,y,r,color,ctx){
ctx.beginPath();
//圆形3
//arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针)
ctx.arc(x,y,r,0,Math.PI*2);
ctx.fillStyle=color;//填充的样式
ctx.strokeStyle=color;//边框的样式
ctx.closePath();
ctx.fill();//填充
ctx.stroke();
}
/**
* 画虚线
* @param x1
* @param y1
* @param x2
* @param y2
* @param color
* @param ctx
*/
Html5Util.prototype.dashedLine = function(x1, y1, x2, y2,color,ctx){
var step = 5;
ctx.strokeStyle = color;//线条样子
ctx.beginPath();
ctx.moveTo(x1, y1);
if(x1==x2){//y轴的虚线
while(y1<y2){
y1=(y1+step<=y2?y1+step:y2);
ctx.lineTo(x1,y1);
y1=(y1+step<=y2?y1+step:y2);
ctx.moveTo(x1, y1);
}
}else{//x轴的虚线
while(x1<x2){
x1=(x1+step<=x2?x1+step:x2);
ctx.moveTo(x1, y1);
x1=(x1+step<=x2?x1+step:x2);
ctx.lineTo(x1,y1);
}
}
ctx.closePath();
ctx.fill();
ctx.stroke();//描边
}
/**
* 画虚线
* @param x1
* @param y1
* @param x2
* @param y2
* @param color
* @param ctx
*/
Html5Util.prototype.dashedLine2 = function(sp,ep,color,ctx){
var x1 =sp.x;
var y1 =sp.y;
var x2 =ep.x;
var y2 =ep.y;
var step = 5;
ctx.strokeStyle = color;//线条样子
ctx.beginPath();
ctx.moveTo(x1, y1);
if(x1==x2){//y轴的虚线
while(y1<y2){
y1=(y1+step<=y2?y1+step:y2);
ctx.lineTo(x1,y1);
y1=(y1+step<=y2?y1+step:y2);
ctx.moveTo(x1, y1);
}
}else{//x轴的虚线
while(x1<x2){
x1=(x1+step<=x2?x1+step:x2);
ctx.moveTo(x1, y1);
x1=(x1+step<=x2?x1+step:x2);
ctx.lineTo(x1,y1);
}
}
ctx.closePath();
ctx.fill();
ctx.stroke();//描边
}
/**
*
* @param x1 矩形左上角x坐标
* @param y1 矩形左上角y坐标
* @param x2 矩形右下角x坐标
* @param y2 矩形右下角y坐标
* @param color
* @param ctx
*/
Html5Util.prototype.dashedLineRectangle = function(x1, y1, x2, y2,color,ctx){
var obj = this;
obj.dashedLine(x1, y1, x2, y1,color,ctx);//矩形上边
obj.dashedLine(x1, y2, x2, y2,color,ctx);//矩形下边
obj.dashedLine(x1, y1, x1, y2,color,ctx);//矩形左边
obj.dashedLine(x2, y1, x2, y2,color,ctx);//矩形右边
}
Html5Util.prototype.text = function(){
guideText.texts = ["第一行文字","第二行文字","第三行文字"];
var padding = 60; // 行距
var adjustY = 150; // 文字欄位初始 Y
for(var i=0;i<guideText.texts.length;i++)
{
context2D.font = "bold 24pt 微軟正黑體";
context2D.textAlign = "center";
context2D.fillText(guideText.texts[i],CANVAS_WIDTH / 2, adjustY + padding*i);
}
}
/**
*
* @param e
* @param canvas
* @returns {x，y轴坐标}
*/
Html5Util.prototype.transEventMousePos = function(e,canvas) {
var x = e.clientX?e.clientX:e.x;
var y = e.clientY?e.clientY:e.y;
var box = canvas.getBoundingClientRect();
return {
x:(x-box.left)*canvas.width/box.width,
y:(y-box.top)*canvas.height/box.height
};
};
Html5Util.prototype.isInRound = function(pos,round,r) {
if(Math.abs(round.x-pos.x)<=r && Math.abs(round.y-pos.y)<=r) {
return true;
}
return false;
}
工具类的使用
<%@page contentType="text/html;charset=utf-8" %>
<%@page import="java.util.Map" %>
<%@page import="java.util.Iterator" %>
<%
String path= request.getContextPath();
String layout_id = request.getParameter("id");
if(layout_id == null) {
layout_id = "";
}
String mode=request.getParameter("mode");
if(mode == null) {
mode = "";
}
Map paramMap = request.getParameterMap();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>html5</title>
<link rel="stylesheet" type="text/css" href="<%=path%>/jquery/css/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/css/layout.css" />
<script type="text/javascript" src="<%=path%>/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="<%=path%>/jquery/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="<%=path%>/javaScript/html5.js"></script>
<style type="text/css">
div{
/*
width: 1080px;
height: 380px;
*/
width: 1055px;
height: 308px;
border-color: #E60749;
border: 1px;
border-style:solid;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
test();
});
function test(){
var html5Obj = new Html5Util(1);
var r = 12;
var div = $('#div1');
var width = div.width();
var height = div.height();
var canvas=$('#Canvas1').get(0);//画布
canvas.width= width
canvas.height = height;
var ctx = canvas.getContext('2d'); // 画笔
var simpleColor = "#00B050"; //普通圆形的颜色 绿色
var greyColor = "#D9D9D9"; //灰色
var redColor = "#FF0000"; //红色
var blueColor = "#497DBB"; //蓝色 虚线时用
var blackColor = "#313131"; //黑色 虚线时用
//var procColor = "#000000"; //黑色 箭头时用
// 画圆 6个 竖向的圆
var roundx = width*0.15;
var roundy= height*0.1
var step = Math.ceil(height/7);
html5Obj.round(roundx,step,r,simpleColor,ctx); //实体厅
html5Obj.round(roundx,step*2,r,simpleColor,ctx);//网厅'
html5Obj.round(roundx,step*3,r,simpleColor,ctx);//短厅
html5Obj.round(roundx,step*4,r,simpleColor,ctx);//WAP
html5Obj.round(roundx,step*5,r,simpleColor,ctx);//IVR
html5Obj.round(roundx,step*6,r,simpleColor,ctx);//'其他'
//写字
//圆形旁边的文字
var fontx = width*0.03;
var fontStep = step+1;
ctx.fillStyle="#000000";
ctx.fillText('实体厅',fontx,step);//填充文字
ctx.fillText('网厅',fontx,step*2);//填充文字
ctx.fillText('短厅',fontx,step*3);
ctx.fillText('WAP',fontx,step*4);
ctx.fillText('IVR',fontx,step*5);
ctx.fillText('其他',fontx,step*6);
//渠道接口日志
ctx.fillText('渠道接口日志',10,15);//填充文字
//圆形旁边的竖线
ctx.beginPath();
ctx.moveTo(roundx+r,step);
ctx.lineTo(roundx+r,step*6);
ctx.lineWidth=3;
ctx.strokeStyle = "#4D4D4D";//线条样子
ctx.closePath();
ctx.stroke();//描边
//横向大箭头
//ctx.moveTo(roundx+r,step*4);
ctx.beginPath();
ctx.strokeStyle="black";//填充的样式
ctx.lineWidth=3;
var y_pro_max = width-2*r;
proc.set({x:roundx+r,y:step*4-r},{x:y_pro_max,y:step*4-r});
proc.setPara({
arrow_size:0.020,
arrow_sharp:0.010
})
proc.paint(ctx);
ctx.closePath();
//横向的圆
var step2 = Math.ceil((width-roundx-r)/8);
var firstX=roundx+step2;
var firstY=step*4-r;
html5Obj.round(firstX,firstY,r,simpleColor,ctx);//缴费记录
html5Obj.round(firstX+step2,firstY,r,redColor,ctx);
html5Obj.round(firstX+2*step2,firstY,r,simpleColor,ctx);
html5Obj.round(firstX+3*step2,firstY,r,simpleColor,ctx);
html5Obj.round(firstX+4*step2,firstY,r,simpleColor,ctx);
html5Obj.round(firstX+5*step2,firstY,r,simpleColor,ctx);
html5Obj.round(firstX+6*step2,firstY,r,greyColor,ctx);
//圆下的文字
var y_text_des =firstY+2*r;
ctx.fillStyle="#000000";
ctx.textAlign="center";
ctx.textBaseline="top"; //垂直的基线
ctx.fillText('缴费记录表',firstX,y_text_des);//填充文字
ctx.fillText('账本流水变更表',firstX+step2,y_text_des);//填充文字
ctx.fillText('信控工单表',firstX+2*step2,y_text_des);//填充文字
ctx.fillText('CRM账务开通表',firstX+3*step2,y_text_des);//填充文字
ctx.fillText('服务开通订单表',firstX+4*step2,y_text_des);//填充文字
ctx.fillText('服务开通工单表',firstX+5*step2,y_text_des);//填充文字
ctx.fillText('指令执行工单表',firstX+6*step2,y_text_des);//填充文字
//三个圆的
var y_cationRound = step+r;
html5Obj.round(firstX+step2,y_cationRound,r,redColor,ctx);
html5Obj.round(firstX+3*step2,y_cationRound,r,simpleColor,ctx);
html5Obj.round(firstX+5*step2,y_cationRound,r,greyColor,ctx);
//三个圆的图例旁边的说明文字
var y_text =y_cationRound;
ctx.fillStyle="#000000";
ctx.textAlign="left";
ctx.textBaseline="middle";
ctx.fillText('超阀值',firstX+step2+r+3,y_text);//填充文字
ctx.fillText('正常',firstX+3*step2+r+3,y_text);//填充文字
ctx.fillText('无此环接',firstX+5*step2+r+3,y_text);//填充文字
//画虚线
//第一个虚线框
//x：网厅圆心+(step2/2) y:网厅圆心
ctx.lineWidth=2;
var x1_dashedLine1 = roundx+(step2/2);
var y1_dashedLine1 = 2*step;
var x2_dashedLine1 = firstX+2*step2 +(step2/2)-5;
var y2_dashedLine1 = 5*step+2*r;
html5Obj.dashedLineRectangle(x1_dashedLine1,y1_dashedLine1,x2_dashedLine1,y2_dashedLine1,simpleColor,ctx);//横线
//第二个虚线框 蓝色
var x1_dashedLine2 = firstX+2*step2 +(step2/2)+5;
var y1_dashedLine2 = y1_dashedLine1;
var x2_dashedLine2 = firstX+3*step2 +(step2/2)-5;
var y2_dashedLine2 = y2_dashedLine1;
html5Obj.dashedLineRectangle(x1_dashedLine2,y1_dashedLine2,x2_dashedLine2,y2_dashedLine2,blueColor,ctx);//横线
//第三个虚线框 红色
var x1_dashedLine3 = firstX+3*step2 +(step2/2)+5;
var y1_dashedLine3 = y1_dashedLine1;
var x2_dashedLine3 = width-r;
var y2_dashedLine3 = y2_dashedLine1;
html5Obj.dashedLineRectangle(x1_dashedLine3,y1_dashedLine3,x2_dashedLine3,y2_dashedLine3,redColor,ctx);//横线
//三个虚线框的说明文字
var x1_text_dashedLine =x1_dashedLine1+(x2_dashedLine1-x1_dashedLine1)/2;//一个汉字大概默认为12px，减去3个汉字
var y1_text_dashedLine =5*step;
var x2_text_dashedLine =x1_dashedLine2+(x2_dashedLine2-x1_dashedLine2)/2;//一个汉字大概默认为12px，减去3个汉字
var x3_text_dashedLine =x1_dashedLine3+(x2_dashedLine3-x1_dashedLine3)/2;//一个汉字大概默认为12px，减去3个汉字
ctx.fillStyle="#000000";
ctx.textAlign="center";
ctx.fillText('财务处理环节',x1_text_dashedLine,y1_text_dashedLine);//填充文字
ctx.fillText('营业处理环节',x2_text_dashedLine,y1_text_dashedLine);//填充文字
ctx.fillText('开机处理环接',x3_text_dashedLine,y1_text_dashedLine);//填充文字
//一段段的双向箭头
//第一个双向箭头
ctx.strokeStyle="#4D4D4D";//填充的样式
ctx.lineWidth=2;
var x1_proc1 = roundx+r;
var y1_proc1 = step*3-r-2;
var x2_proc = firstX+step2
proc.set({x:roundx+r,y:y1_proc1},{x:firstX,y:y1_proc1});
proc.setPara({arrow_size:0.08, arrow_sharp:0.05 })
proc.paint(ctx,true);
//第二个双向箭头
proc.set({x:firstX,y:y1_proc1},{x:firstX+step2,y:y1_proc1});
proc.setPara({arrow_size:0.08, arrow_sharp:0.05 })
proc.paint(ctx,true);
//第三个双向箭头
proc.set({x:firstX+step2,y:y1_proc1},{x:firstX+2*step2,y:y1_proc1});
proc.setPara({arrow_size:0.08, arrow_sharp:0.05 })
proc.paint(ctx,true);
//第四个双向箭头
proc.set({x:firstX+2*step2,y:y1_proc1},{x:firstX+3*step2,y:y1_proc1});
proc.setPara({arrow_size:0.08, arrow_sharp:0.05 })
proc.paint(ctx,true);
//第五个箭头
proc.set({x:firstX+3*step2,y:y1_proc1},{x:firstX+4*step2,y:y1_proc1});
proc.setPara({arrow_size:0.08, arrow_sharp:0.05 })
proc.paint(ctx,true);
//第六个双向箭头
proc.set({x:firstX+4*step2,y:y1_proc1},{x:firstX+5*step2,y:y1_proc1});
proc.setPara({arrow_size:0.08, arrow_sharp:0.05 })
proc.paint(ctx,true);
//第7个箭头
proc.set({x:firstX+5*step2,y:y1_proc1},{x:firstX+6*step2,y:y1_proc1});
proc.setPara({arrow_size:0.08, arrow_sharp:0.05 })
proc.paint(ctx,true);
//箭头下面的虚线
var y_d = firstY-r;
html5Obj.dashedLine2({x:firstX,y:y1_proc1},{x:firstX,y:y_d},blackColor,ctx);
html5Obj.dashedLine2({x:firstX+step2,y:y1_proc1},{x:firstX+step2,y:y_d},blackColor,ctx);
html5Obj.dashedLine2({x:firstX+2*step2,y:y1_proc1},{x:firstX+2*step2,y:y_d},blackColor,ctx);
html5Obj.dashedLine2({x:firstX+3*step2,y:y1_proc1},{x:firstX+3*step2,y:y_d},blackColor,ctx);
html5Obj.dashedLine2({x:firstX+4*step2,y:y1_proc1},{x:firstX+4*step2,y:y_d},blackColor,ctx);
html5Obj.dashedLine2({x:firstX+5*step2,y:y1_proc1},{x:firstX+5*step2,y:y_d},blackColor,ctx);
html5Obj.dashedLine2({x:firstX+6*step2,y:y1_proc1},{x:firstX+6*step2,y:y_d},blackColor,ctx);
//html5Obj.dashedLineRectangle(500,300,700,500,"#E60749",ctx);
// html5Obj.dashedLine(125,129,125,192,"#2A00FF",ctx);
}
</script>
</head>
<body>
<div id="div1">
<canvas id="Canvas1"></canvas>
</div>
<input type="button" value="html5" onclick=""/>
<marquee direction=left></marquee>
</body>
</html>
相关推荐
java邮件发送的工具类，方法都已封装好，一键调用即可发送，支持普通文本邮件，支持带有附件的邮件，支持html代码的邮件内容
/** * 封装各种格式的编码解码工具类. * 1.Commons-Codec的 hex/base64 编码 * 2.自制的base62 编码 * 3.Commons-Lang的xml/html escape * 4.JDK提供的URLEncoder */
软件封装工具，推荐给所有需要进行html网页封装
本文实例讲述了php封装的pdo数据库操作工具类与用法。分享给大家供大家参考，具体如下： <?php header(Content-Type:text/html;charset=utf-8); class PdoMysql{ public static $config = array();//设置连接...
h264转码MP4 支持html5播放格式 示例代码： H264TrackImpl h264TrackImpl = new H264TrackImpl(new FileDataSourceImpl("C://a.264")); Movie movie = new Movie(); movie.addTrack(h264TrackImpl); Container ...
把Java实现表格的相关操作进行了封装，本次封装是基于 POI 的二次开发，最终使用只需要调用一个工具类中的方法，就能满足业务中绝大部门的导入和导出需求。详细讲解包含源码 把Java实现表格的相关操作进行了封装，...
该工具类为一个使用js 闭包封装的一个提示模态框，使用于不同分辨率的设备包括pc
*php操作mysql的工具类 */ class Db{ private $_db = null;//数据库连接句柄 private $_table = null;//表名 private $_where = null;//where条件 private $_order = null;//order排序 private $_limit = nul
工具类集合 主要涵盖了平时自己会用到的一些工具方法，为了可以重复使用，就找了个时间慢慢把之前写的以及平时会用到的工具整理起来。 主要模块如下： cn:中文内容处理工具 code:代码生成工具 common:系统公用代码 ...
而且随后会结合这个引擎整理出一套用于html5 小游戏开发的可视化编辑工具。 旨在帮助开发者更快更容易的搭建一款小游戏为目的。 目前已经开源到github （https://github.com/AlloyTeam/Laro） 我们团队希望通过Laro...
3、com.baijob.commonTools.net.HtmlUtil HTML工具类，暂时只提供特殊字符转义 4、com.baijob.commonTools.net.SocketUtil socket工具类。 isUsableLocalPort() 检测本地某个端口是否可用（可用是指没有被其他程序...
*plus 的download的封装工具类 1.本地缓存下载文件 2.增加storage,增加每一个本地缓存的有效时间戳 3.增加自定义设置方法,可以根据不同需求,对参数进行修改 4.采用下载队列进行下载管理,增加最大并发请求数,防止一次...
Jodd = Tools IoC MVC DB AOP TX JSON HTML 被分成众多模块，按需选择，其中工具类模块有：jodd-core 一些工具类，包括Printf、JDateTime、StringUtil、Fast buffers等等jodd-bean BeanUtil以及类型检查转换工具...
对 swftools(pdf转换swf)工具和OpenOffice工具的调用进行代码封装 工具下载地址 OpenOffice http://www.javaworld.com.tw/jute/post/view?bid=11&id=248862 swftools ...
Word转成HTML,可支持03和07版,已封装为工具类,直接调用即可,jar包齐全
2、封装的JS工具类： var HtmlUtil = { /*1.用浏览器内部转换器实现html编码（转义）*/ htmlEncode:function (html){ //1.首先动态创建一个容器标签元素，如DIV var temp = document.createElement ("div");
调用http请求的工具类
然而，由于HTML5的W3C标准规范还未制定，安卓系统中类浏览器Webview自身存在一些局限性，因此仍存在着诸多问题亟需解决，包括：（1）多窗口类浏览器模式问题。安卓上用于加载的Webview视图窗口只是作为类浏览器而...
2.1开发工具类 3 2.1.1 MyEclipse 3 2.1.2 Tomcat 6.0 3 2.1.3 SQL Server 3 2.2开发技术类 3 2.2.1 Java编程语言概述 3 2.2.2 Spring技术介绍 4 2.2.3 HTML5 4 2.2.4 JQuery Mobile 5 2.2.5 CSS3 5 2.2.6 AJAX 5 3 ...
缺点：如果是载入的是普通网页，没有什么问题，但如果是html5,封装后，在android2.3以上才能正常访问，android2.2及以下，SDK中的WebView还没完全支持HTML5 4、可本地导出apk文件 Export→安卓项目→生成项目→导出...