使用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实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 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-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
php设计模式 Proxy (代理模式)
2011/06/26 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
jquery实现手机号码选号的方法
2015/07/31 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
python中sleep函数用法实例分析
2015/04/29 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
Python语言描述随机梯度下降法
2018/01/04 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
python计算导数并绘图的实例
2020/02/29 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
开展批评与自我批评心得体会
2014/10/17 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
实习单位证明范例
2014/11/17 职场文书
检讨书范文
2015/01/27 职场文书
薪资证明范本
2015/06/19 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
muduo TcpServer模块源码分析
2022/04/26 Redis