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 相关文章推荐
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
javascript function调用时的参数检测常用办法
Feb 26 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 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
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
PHP安全性漫谈
2012/06/28 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
php 强制下载文件实现代码
2013/10/28 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
js实现微博发布小功能
2017/01/12 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
列举Python中吸引人的一些特性
2015/04/09 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
Python操作mongodb的9个步骤
2018/06/04 Python
python中有函数重载吗
2020/05/28 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
个人求职信范文分享
2014/01/06 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
感恩老师演讲稿600字
2014/08/28 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
工程质检员岗位职责
2015/04/08 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
Java如何实现树的同构?
2021/06/22 Java/Android