Raphael帶文本標簽可拖動的圖形實現(xiàn)代碼
更新時間：2013年02月20日 14:09:40 作者：
Javascript和Raphael順便學習了一下,主要是為了實現(xiàn)一個可拖動的矩形同時矩形上還得顯示標簽，網(wǎng)上關于這方面的知識提的很是于是本人自不量力寫了一下，感興趣的你可不要錯過了哈，希望可以幫助到你
最近準備學學Javascript和Raphaël，實現(xiàn)一個可拖動的矩形，另外矩形上還得顯示標簽。查了一下網(wǎng)上這個東西還比較冷門。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>
實現(xiàn)方法就是將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>
實現(xiàn)方法就是將Text作為Rectangle自定義屬性，才能控制當拖動的時候，隨著Rectangle一起移動。
相關文章
這篇文章介紹了如何在JavaScript中使用Promise對象來處理異步操作,通過使用fetch()方法和Promise對象,我們可以從后端API獲取數(shù)據(jù)并處理返回值,文章展示了如何使用.then()鏈式操作和async/await語法來訪問Promise對象的返回值,感興趣的朋友一起看看吧2025-03-03
最近聽說了一個名詞word宏編程。自己也學習了一下js動態(tài)添加word表格2010-06-06
在原型鏈中，Object是頂級公民，function是一級公民，其他的是二級公民，先記住這句話，下面我們來講解一下為什么這么說。2021-06-06
這篇文章主要介紹了uni-app實現(xiàn)點贊評論功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
JavaScript判斷是否為數(shù)字的4種方法及效率比較
這篇文章主要介紹了JavaScript判斷是否為數(shù)字的4種方法及效率比較,本文直接給出判斷方法實現(xiàn)代碼及運行效率效果圖,方便大家選擇使用,需要的朋友可以參考下2015-04-04
通過表單在iframe內(nèi)向一個跨域的url提交的時候，如何判斷提交成功了呢？這個，基本上，很難，因為瀏覽器安全沙箱的限制，我們沒有辦法通過獲得iframe內(nèi)部不同域頁面的信息。2009-11-11
eclipse中js文件報錯的情況，或許大家早已習以為常了，那么有什么好的方法可以將其忽略掉呢？如果你也在尋找此問題，那么本文或許可以幫助到你2013-10-10
javascript表單驗證使用示例(javascript驗證郵箱)
JavaScript可用來在數(shù)據(jù)被送往服務器前對HTML表單中的這些輸入數(shù)據(jù)進行驗證2014-01-01
js onmousewheel事件多次觸發(fā)問題解決方法
做一個首屏和第二屏之間滾動鼠標滾輪就可以整平切換的效果，遇到了很多問題，下面是問題解決方法2014-10-10
本文介紹了Date對象的使用方法，清晰明了，實現(xiàn)方法有多種，僅供大家參考，希望對大家有所幫助，下面就跟小編一起來看看吧2016-11-11