亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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ě)的很爛。
復(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)文章

  • Bootstrap風(fēng)格的zTree右鍵菜單

    Bootstrap風(fēng)格的zTree右鍵菜單

    這篇文章主要介紹了Bootstrap風(fēng)格的zTree右鍵菜單功能,實(shí)現(xiàn)代碼分為html,css和js三部分,代碼簡(jiǎn)單易懂,非常不錯(cuò),需要的朋友可以參考下
    2017-02-02
  • JS截取字符串常用方法整理及使用示例

    JS截取字符串常用方法整理及使用示例

    截取字符串的方法有很多,在使用過(guò)程中根據(jù)自己的實(shí)際需求進(jìn)行選擇,下面整理了一些常用的方法及使用示例,感興趣的朋友可以了解下
    2013-10-10
  • Javascript實(shí)現(xiàn)運(yùn)算符重載詳解

    Javascript實(shí)現(xiàn)運(yùn)算符重載詳解

    本文給大家匯總介紹了Javascript實(shí)現(xiàn)運(yùn)算符重載的方法,實(shí)現(xiàn)的思路很簡(jiǎn)單,有需要的小伙伴可以來(lái)看看
    2018-04-04
  • Javascript new關(guān)鍵字的玄機(jī) 以及其它

    Javascript new關(guān)鍵字的玄機(jī) 以及其它

    本人是Javascript菜鳥(niǎo),下面是前幾天學(xué)習(xí)Javascript的旅程心得,希望對(duì)和我一樣的入門(mén)者有點(diǎn)用,也希望高手批評(píng)指正。
    2010-08-08
  • Vuex模塊化應(yīng)用實(shí)踐示例

    Vuex模塊化應(yīng)用實(shí)踐示例

    這篇文章主要介紹了Vuex模塊化應(yīng)用實(shí)踐示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • 微信小程序自定義toast組件的方法詳解【含動(dòng)畫(huà)】

    微信小程序自定義toast組件的方法詳解【含動(dòng)畫(huà)】

    這篇文章主要介紹了微信小程序自定義toast組件的方法,結(jié)合實(shí)例形式詳細(xì)分析了微信小程序自定義toast組件的步驟、實(shí)現(xiàn)方法及相關(guān)操作技巧,需要的朋友可以參考下
    2019-05-05
  • javascript中動(dòng)態(tài)函數(shù)用法實(shí)例分析

    javascript中動(dòng)態(tài)函數(shù)用法實(shí)例分析

    這篇文章主要介紹了javascript中動(dòng)態(tài)函數(shù)用法,實(shí)例分析了動(dòng)態(tài)函數(shù)的定義方法與使用技巧,需要的朋友可以參考下
    2015-05-05
  • 微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報(bào)

    微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報(bào)

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報(bào),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • layer.js之回調(diào)銷毀對(duì)話框的例子

    layer.js之回調(diào)銷毀對(duì)話框的例子

    今天小編就為大家分享一篇layer.js之回調(diào)銷毀對(duì)話框的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-09-09
  • 微信小程序?qū)崿F(xiàn)時(shí)間戳格式轉(zhuǎn)換

    微信小程序?qū)崿F(xiàn)時(shí)間戳格式轉(zhuǎn)換

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)時(shí)間戳格式轉(zhuǎn)換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-07-07

最新評(píng)論