Raphael带文本标签可拖动的图形实现代码
更新时间：2013年02月20日 14:09:40 作者：
Javascript和Raphael顺便学习了一下,主要是为了实现一个可拖动的矩形同时矩形上还得显示标签，网上关于这方面的知识提的很是于是本人自不量力写了一下，感兴趣的你可不要错过了哈，希望可以帮助到你
最近准备学学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一起移动。
复制代码 代码如下:
<!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一起移动。
相关文章
这篇文章主要介绍了Bootstrap风格的zTree右键菜单功能，实现代码分为html，css和js三部分，代码简单易懂，非常不错，需要的朋友可以参考下2017-02-02
截取字符串的方法有很多，在使用过程中根据自己的实际需求进行选择，下面整理了一些常用的方法及使用示例，感兴趣的朋友可以了解下2013-10-10
本文给大家汇总介绍了Javascript实现运算符重载的方法，实现的思路很简单，有需要的小伙伴可以来看看2018-04-04
本人是Javascript菜鸟，下面是前几天学习Javascript的旅程心得，希望对和我一样的入门者有点用，也希望高手批评指正。2010-08-08
这篇文章主要介绍了Vuex模块化应用实践示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了微信小程序自定义toast组件的方法,结合实例形式详细分析了微信小程序自定义toast组件的步骤、实现方法及相关操作技巧,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了javascript中动态函数用法,实例分析了动态函数的定义方法与使用技巧,需要的朋友可以参考下2015-05-05
这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
今天小编就为大家分享一篇layer.js之回调销毁对话框的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了微信小程序实现时间戳格式转换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
最新评论