Raphael带文本标签可拖动的图形实现代码


Posted in Javascript onFebruary 20, 2013

最近准备学学Javascript和Raphaël,实现一个可拖动的矩形,另外矩形上还得显示标签。查了一下网上这个东西还比较冷门。Javascript才学没几天,代码估计写的很烂。

<!doctype html> 
<html charset="utf-8"> 
<head> 
<title>Raphaël - Connectivities</title> 
<script src="raphael-min.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript"> 
function Entity(r, l, t, w, h){ 
this.Label = r.text(l + w/2, t + h/2, "Hello World!"); 
this.Rectangle = r.rect(l, t, w, h, 10).attr({fill:"brown", stroke:"#666", title:"A Rectangle"}).drag(move, Dragger, up).data("cooperative", this.Label).toBack(); 
function Dragger(){ 
this.xx = this.attr("x"); 
this.yy = this.attr("y"); 
this.animate({"fill-opacity": .2}, 500); 
} 
function move(dx, dy){ 
var attr = {x: this.xx + dx, y: this.yy + dy}; 
this.attr(attr); 
var lb = this.data("cooperative"); 
var attr1 = {x: this.xx + dx + this.attr("width") / 2, y: this.yy + dy + this.attr("height") / 2}; 
lb.attr(attr1); 
} 
function up(){ 
this.animate({"fill-opacity": 1}, 300); 
} 
} 
window.onload = function(){ 
var r = Raphael("holder", 620, 420),discattr={fill:"red", stroke:"none"}; 
var entity1 = new Entity(r, 0, 0, 60, 40); 
}; 
</script> 
</head> 
<body> 
<div id="holder"> 
</div> 
</body> 
</html>

实现方法就是将Text作为Rectangle自定义属性,才能控制当拖动的时候,随着Rectangle一起移动。
Javascript 相关文章推荐
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
JavaScript中string对象
Jun 12 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
详解从react转职到vue开发的项目准备
Jan 14 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
Node.js实现断点续传
Jun 23 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 #Javascript
JS刷新框架外页面七种实现代码
Feb 18 #Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 #Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 #Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 #Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 #Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 #Javascript
You might like
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
微信自定义分享php代码分析
2016/11/24 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
Python中循环引用(import)失败的解决方法
2018/04/22 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
优秀毕业生求职信范文
2014/01/02 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
初中班干部工作总结
2015/08/10 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
Python使用MapReduce进行简单的销售统计
2022/04/22 Python