`
snake_hand
  • 浏览: 575699 次
社区版块
存档分类
最新评论

Raphaël带文本标签可拖动的图形

 
阅读更多

【渣排版】

最近准备学学Javascript和Raphaël，实现一个可拖动的矩形，另外矩形上还得显示标签。查了一下网上这个东西还比较冷门。Javascript才学没几天，代码估计写的很烂。

 1 <!doctype html>
 2 <html charset="utf-8">
 3     <head>
 4         <title>Raphaël - Connectivities</title>
 5         <script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>
 6         <script type="text/javascript">
 7             function Entity(r, l, t, w, h){
 8                 this.Label = r.text(l + w/2, t + h/2, "Hello World!");
 9                 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();
10 
11                 function Dragger(){
12                     this.xx = this.attr("x");
13                     this.yy = this.attr("y");
14                     this.animate({"fill-opacity": .2}, 500);
15                 }
16 
17                 function move(dx, dy){
18                     var attr = {x: this.xx + dx, y: this.yy + dy};
19                     this.attr(attr);
20                     var lb = this.data("cooperative");
21                     var attr1 = {x: this.xx + dx + this.attr("width") / 2, y: this.yy + dy + this.attr("height") / 2};
22                     lb.attr(attr1);
23                 }
24 
25                 function up(){
26                     this.animate({"fill-opacity": 1}, 300);
27                 }
28             }
29 
30             window.onload = function(){
31                 var r = Raphael("holder", 620, 420),discattr={fill:"red", stroke:"none"};
32                 var entity1 = new Entity(r, 0, 0, 60, 40);
33             };
34         </script>
35     </head>
36     <body>
37         <div id="holder">
38         </div>
39     </body>
40 </html>

实现方法就是将Text作为Rectangle自定义属性，才能控制当拖动的时候，随着Rectangle一起移动。

1
顶
1
踩
分享到：
| 最完整的的判断使用的浏览器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics