Raphael带文本标签可拖动的图形实现代码
最近准备学学Javascript和Raphaël,实现一个可拖动的矩形,另外矩形上还得显示标签。查了一下网上这个东西还比较冷门。Javascript才学没几天,代码估计写的很烂。
实现方法就是将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一起移动。
相关推荐
nmgxzm00 2020-11-10
ifconfig 2020-10-14
hhanbj 2020-11-17
zfszhangyuan 2020-11-16
古叶峰 2020-11-16
一个智障 2020-11-15
jipengx 2020-11-12
81427005 2020-11-11
xixixi 2020-11-11
游走的豚鼠君 2020-11-10
苗疆三刀的随手记 2020-11-10
Web卓不凡 2020-11-03
小飞侠V 2020-11-02
帕尼尼 2020-10-30
爱读书的旅行者 2020-10-26
帕尼尼 2020-10-23
杏仁技术站 2020-10-23
淼寒儿 2020-10-22