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一起移动。
相关文章
这篇文章介绍了如何在JavaScript中使用Promise对象来处理异步操作,通过使用fetch()方法和Promise对象,我们可以从后端API获取数据并处理返回值,文章展示了如何使用.then()链式操作和async/await语法来访问Promise对象的返回值,感兴趣的朋友一起看看吧2025-03-03
最近听说了一个名词word宏编程。自己也学习了一下js动态添加word表格2010-06-06
在原型链中，Object是顶级公民，function是一级公民，其他的是二级公民，先记住这句话，下面我们来讲解一下为什么这么说。2021-06-06
这篇文章主要介绍了uni-app实现点赞评论功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了JavaScript判断是否为数字的4种方法及效率比较,本文直接给出判断方法实现代码及运行效率效果图,方便大家选择使用,需要的朋友可以参考下2015-04-04
通过表单在iframe内向一个跨域的url提交的时候，如何判断提交成功了呢？这个，基本上，很难，因为浏览器安全沙箱的限制，我们没有办法通过获得iframe内部不同域页面的信息。2009-11-11
eclipse中js文件报错的情况，或许大家早已习以为常了，那么有什么好的方法可以将其忽略掉呢？如果你也在寻找此问题，那么本文或许可以帮助到你2013-10-10
javascript表单验证使用示例(javascript验证邮箱)
JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证2014-01-01
做一个首屏和第二屏之间滚动鼠标滚轮就可以整平切换的效果，遇到了很多问题，下面是问题解决方法2014-10-10
本文介绍了Date对象的使用方法，清晰明了，实现方法有多种，仅供大家参考，希望对大家有所帮助，下面就跟小编一起来看看吧2016-11-11
最新评论