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 相关文章推荐
Javascript调用C#代码
Jan 17 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
深入浅析react native es6语法
Dec 09 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
js canvas实现五子棋小游戏
Jan 22 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
星际玩家的三大定律
2020/03/04 星际争霸
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
php实现用户登陆简单实例
2017/04/04 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
python实现问号表达式(?)的方法
2013/11/27 Python
Python实现Linux下守护进程的编写方法
2014/08/22 Python
Python性能提升之延迟初始化
2016/12/04 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
python模块如何查看
2020/06/16 Python
Python如何操作docker redis过程解析
2020/08/10 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
2014年教师培训的自我评价
2014/01/03 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
集体备课反思
2014/02/12 职场文书
网络编辑岗位职责
2014/03/18 职场文书
邀请函格式范文
2015/02/02 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
Go timer如何调度
2021/06/09 Golang
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS