//画箭头
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邮件发送工具类——`EasyEmailUtil`，它使得邮件发送变得简单易行，无需繁琐的配置，只需一键调用即可完成。 首先，`EasyEmailUtil`类通常会包含以下几个核心功能： 1. **...
### 封装JS工具类 #### 1. Echo 方法 该方法的功能是向客户端输出指定的消息。 ```csharp public static void Echo(string msg) { HttpContext.Current.Response.Write(msg); } ``` 通过`HttpContext.Current....
5. **图片处理工具类**： - `ImageLoader`：用于加载、缓存和显示图片，可以结合Glide或Picasso库使用，提高图片加载效率。 6. **文件操作工具类**： - `FileUtils`：提供读写文件、创建文件夹、删除文件等操作，...
本主题聚焦于一个名为"C#封装的Html内容操作类"，它提供了一种高效的方法来处理和操作HTML文档。这个类库使得开发者能够方便地获取HTML内容，以及从HTML中提取特定元素，如图片（img标签）的信息。 首先，我们要...
/** * 封装各种格式的编码解码工具类. * 1.Commons-Codec的 hex/base64 编码 * 2.自制的base62 编码 * 3.Commons-Lang的xml/html escape * 4.JDK提供的URLEncoder */
5. **提供分页HTML**：工具类可以提供一个方法生成分页的HTML代码，方便直接插入到视图模板中。 ```php public function renderPagination() { // 生成HTML代码 } ``` 6. **可配置性**：为了适应不同的需求，...
这个“邮件发送工具类”显然已经过封装，方便开发者快速集成到自己的项目中，无需深入了解底层的邮件协议。下面将详细阐述邮件发送的相关知识点。 首先，我们来了解邮件发送的基本原理。电子邮件系统主要基于SMTP...
软件封装工具，推荐给所有需要进行html网页封装
HttpClientHelper 是一个C#编写的工具类，主要目的是简化HTTP客户端操作，提供同步和异步的请求方法，返回数据格式多样，包括字符串、泛型类型和XML。在爬虫开发中，这样的工具类非常实用，因为爬虫经常需要与各种...
在Android开发中，工具类（Utility Class）是程序员经常使用的一种设计模式，它封装了重复性的、通用的代码，使得代码更加模块化，易于维护。本压缩包"基于Android系统Api封装常用工具类.zip"中包含的AJT-code很可能...
10. **API设计**：如果你打算将这个工具类封装成一个API供他人使用，需要考虑参数设计（如输入HTML字符串、输出文件路径等），返回值（成功/失败标识，错误信息），以及可能的异步处理和并发支持。 总的来说，...
【标题】：“自己封装的一个checkbook工具” 这个标题暗示了一个开发者自定义的工具，它可能是一个用于处理复选框操作的程序或者库，被命名为"checkbook"，可能是因为其功能与传统会计中的检查清单类似，允许用户在...
在使用这两个工具类时，开发者应了解其API接口，理解每个方法的作用和参数，以便有效地集成到自己的项目中。同时，遵循良好的编程习惯，如错误处理和日志记录，可以使工具类更加健壮和易维护。 总结起来，这两个...
5. **图片处理工具类**： - `ImageUtils`：可以进行图片的压缩、裁剪、旋转等操作，还可以处理加载图片的缓存策略。 6. **XML/JSON解析工具类**： - `XmlUtils`：处理XML数据，如解析XML文件、转化成对象等。 - ...
JavaScript 后台调用工具类是一种实用的编程资源，它为开发者提供了在后台环境中使用 JavaScript 进行操作的便利。这个工具类旨在简化JavaScript代码，让开发者能够更高效地进行项目开发，尤其对于不熟悉JavaScript...
在Java编程语言中，封装是一种核心的面向对象编程原则，它允许我们将数据和操作这些数据的方法捆绑在一起，以提供更好的代码组织和安全性。...在实际项目中，根据需求选择合适的工具类进行集成，可以显著提升代码质量。
3. HTML 工具类：Hutool 的 HtmlUtil 工具类提供了 HTML 编码、解码、清除 HTML 标签、过滤 HTML 文本等功能，可以防止 XSS 攻击和 SQL 注入。 4. 定时任务：Hutool 的 CronUtil 工具类提供了定时任务的功能，支持 ...
本篇文章将详细讲解如何通过Carthage来集成AFNetworking，并进一步封装成一个实用的网络请求工具类。 首先，我们要了解Carthage。Carthage是一个轻量级的依赖管理工具，它不采用Podfile而是使用Cartfile来管理项目...
在Java Android开发中，工具类（Utils类）是开发者经常使用的辅助代码集合，它们封装了一些通用功能，方便在多个类中复用，提高代码的可维护性和可读性。以下是一些常见的Java Android工具类及其包含的知识点： 1. ...
综上所述，Echarts-java资源工具类是一个帮助Java开发者更方便地生成和使用Echarts图表的工具，它结合了Echarts的JavaScript库和Java的封装库，实现了前后端的有效协同，提升了数据可视化的开发效率。通过理解和运用...