使用jTopo给Html5 Canva中绘制的元素添加鼠标事件


Posted in HTML / CSS onMay 15, 2014

使用Html5的时候,在Canvas上绘制的东西是不能相应鼠标事件的,但是使用jTopo添加事件非常简单,效果如下: 

使用jTopo给Html5 Canva中绘制的元素添加鼠标事件 

代码示例:

复制代码
代码如下:

var node = new JTopo.Node("Hello");
node.setLocation(409, 269);
node.mousedown(function(event){
if(event.button == 2){
node.text = '按下右键';
}else if(event.button == 1){
node.text = '按下中键';
}else if(event.button == 0){
node.text = '按下左键';
}
});
node.mouseup(function(event){
if(event.button == 2){
node.text = '松开右键';
}else if(event.button == 1){
node.text = '松开中键';
}else if(event.button == 0){
node.text = '松开左键';
}
});
node.click(function(event){
console.log("单击");
});
node.dbclick(function(event){
console.log("双击");
});
node.mousedrag(function(event){
console.log("拖拽");
});
node.mouseover(function(event){
console.log("mouseover");
});
node.mousemove(function(event){
console.log("mousemove");
});
node.mouseout(function(event){
console.log("mouseout");
});
HTML / CSS 相关文章推荐
CSS3轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
纯CSS实现设置半个字符的样式
Jul 03 HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 #HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 #HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 #HTML / CSS
HTML5 embed标签定义和用法详解
May 09 #HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 #HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 #HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 #HTML / CSS
You might like
php foreach、while性能比较
2009/10/15 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
js获得鼠标的坐标值的方法
2013/03/13 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
Python面向对象程序设计示例小结
2019/01/30 Python
python实现批量转换图片为黑白
2020/06/16 Python
Python如何给你的程序做性能测试
2020/07/29 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
.NET现在共支持多少种语言
2014/02/26 面试题
小型女装店的创业计划书
2014/01/09 职场文书
亲子读书活动方案
2014/02/22 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
2014年度思想工作总结
2014/11/27 职场文书
消费者投诉书范文
2015/07/02 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
Python数据分析之pandas读取数据
2021/06/02 Python
Python如何使用循环结构和分支结构
2022/04/13 Python
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers