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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
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
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
如何离线执行php任务
2017/02/21 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
Python中列表(list)操作方法汇总
2014/08/18 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
销售总监岗位职责
2014/01/04 职场文书
化学教师教学反思
2014/01/17 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
医学生求职信
2014/07/01 职场文书
边城读书笔记
2015/06/29 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers