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 相关文章推荐
jquery简单体验
Jan 10 Javascript
[转]JS宝典学习笔记
Feb 07 Javascript
用JavaScript显示随机图像或引用
Apr 21 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 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
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
python版本的仿windows计划任务工具
2018/04/30 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
详解Django 时间与时区设置问题
2019/07/23 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
python异常处理try except过程解析
2020/02/03 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
本科生的职业生涯规划范文
2014/01/09 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
大学生创业计划书
2019/06/24 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
Python基本数据类型之字符串str
2021/07/21 Python
MySQL如何解决幻读问题
2021/08/07 MySQL
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫