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