javascript基于HTML5 canvas制作画箭头组件


Posted in Javascript onJune 25, 2014

样例:

javascript基于HTML5 canvas制作画箭头组件

废话少说,直接上代码:

arrow.js

/**
 * 实现两点间画箭头的功能
 * @author mapleque@163.com
 * @version 1.0
 * @date 2013.05.23
 */
;(function(window,document){
 if (window.mapleque==undefined)
 window.mapleque={};
 if (window.mapleque.arrow!=undefined)
 return;
 
 /**
 * 组件对外接口
 */
 var proc={
 /**
 * 接收canvas对象,并在此上画箭头(箭头起止点已经设置)
 * @param context
 */
 paint:function(context){paint(this,context);},
 /**
 * 设置箭头起止点
 * @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){
 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();
 };
 //计算头部坐标
 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 arrow=new Function();
 arrow.prototype=proc;
 window.mapleque.arrow=arrow;
})(window,document);

arrow.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample of the arrow</title>
<script type="text/javascript" src="./arrow.js"></script>
</head>
<body>
<canvas width=800 height=600 id="arrowLine">请使用支持HTML5的浏览器</canvas>
<script type="text/javascript">
var cont=document.getElementById("arrowLine").getContext('2d');
var a1=new window.mapleque.arrow();
a1.set({x:350,y:300},{x:200,y:200});
a1.paint(cont);
var a2=new window.mapleque.arrow();
a2.set({x:100,y:100},{x:200,y:250});
a2.paint(cont);
var a3=new window.mapleque.arrow();
a3.set({x:100,y:300},{x:150,y:150});
a3.paint(cont);
var a4=new window.mapleque.arrow();
a4.set({x:350,y:150},{x:150,y:250});
a4.setPara({
 arrow_size:0.5,
 arrow_sharp:0.5
})
a4.paint(cont);
</script>
</body>
</html>
Javascript 相关文章推荐
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
原生js实现吸顶效果
Mar 13 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
js+css实现打字效果
Jun 24 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
node.js学习总结之调式代码的方法
Jun 25 #Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 #Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 #Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 #Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 #Javascript
搭建pomelo 开发环境
Jun 24 #Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 #Javascript
You might like
Linux下PHP连接Oracle数据库
2014/08/20 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
求职信模板怎么做
2014/01/26 职场文书
大学运动会入场词
2014/02/22 职场文书
团拜会策划方案
2014/06/07 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
会计工作检讨书
2015/02/19 职场文书
困难补助申请报告
2015/05/19 职场文书
会议主持词开场白
2015/05/28 职场文书
催款函范本大全
2015/06/24 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis