Raphael带文本标签可拖动的图形实现代码

196 阅读 0 评论 130 点赞

我是靠谱客的博主动听荔枝，最近开发中收集的这篇文章主要介绍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> 