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 相关文章推荐
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 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
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
js 浮动层菜单收藏
2009/01/16 Javascript
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
详解Python中的文本处理
2015/04/11 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
django实现前后台交互实例
2017/08/07 Python
Python_LDA实现方法详解
2017/10/25 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
python操作文件的参数整理
2019/06/11 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
初中校园广播稿
2014/02/02 职场文书
晨会主持词
2014/03/17 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
委托函范文
2015/01/29 职场文书
研究生导师推荐信
2015/03/25 职场文书
会议室管理制度范本
2015/08/06 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
再谈python_tkinter弹出对话框创建
2022/03/20 Python