011_Raphael常用方法
1. 克隆方法
1.1. clone()方法是克隆一個Raphael元素, 會創建一個新的Dom。
rect.clone();2. 數據方法
2.1. data()方法是個不可思議的方法。你可以根據自己需要為Raphael元素賦予你想賦予的含義, 并且在需要時取回來:
var rect = paper.rect(20, 20, 60, 40).attr({"fill": "green" }); rect.data({ name: "張三", age: 18 }); paper.text(100, 50, "name: " + rect.data("name") + ", age: " + rect.data("age")).attr({'font-size': 11, 'fill': 'green', 'text-anchor': 'start' });2.2. removeData()方法是移出已經添加了的內容:
rect.removeData("age");3. toFront()和toBack()方法
3.1. toFront()到前面來, toBack()到后面去。toFront()就相當于我把一個Dom的z-index修改的很大, 大到超過其它所有元素, 所以它離用戶眼睛最近而覆蓋其它元素, toBack()與它相反。
4. 隱藏和顯示方法
4.1.?hide()和show()相反, 分別是隱藏和顯示, 就好像我們操作css時會用到display:none;和display:block;一樣。
5. 刪除元素方法
5.1. remove()刪除元素, 調用這個方法的元素將會從畫布上移除。remove()是直接把Dom節點刪除掉了, 也就是真正意義上的不存在了。
6. 清空畫布方法
6.1. paper.clear()方法清空畫布所有元素。
7. 重新設置畫布的大小方法
7.1. paper.setSize(w, h)用來重新設置畫布的大小。當你發現畫布大小不合適時, 你需要調整畫布的大小, 而不是需要從頭建立畫布, 然后重復原來的工作。該方法有2個參數: 畫布的寬和高。
8. set()方法
8.1. set()方法幫助我們對Raphael元素進行分組然后進行批量管理。也就是我們放進一個set里面的Raphael元素如果用set來執行一些動作, 那么這些操作是所有在set里面的元素起作用的。
var raphaelSet = paper.set();
8.2. set.push([element...]), 往set里面添加元素。
8.3. set.pop(),彈出set中的最后一個元素, 就是清除最后一個添加進去的元素。
8.4. set.clear(), 清空set, clear()只是清除set里的內容, 并不會對里面的內容本身有影響。
8.5. set.exclude(element), 從set里面剔除元素。
8.6. set.forEach(), 循環set對象, 然后通過遍歷對set內的元素進行操作。
8.7. set.splice(index,count,element)方法, 從index的位置刪除count個元素, 然后添加element元素。它是有返回值的, 它將返回被刪除掉的元素。
9. 例子
9.1. 代碼
<!DOCTYPE html> <html><head><title>Raphael常用方法</title><script type="text/javascript" src="raphael.js"></script><style type="text/css">#sample-1, #sample-2, #sample-3, #sample-4, #sample-5, #sample-6, #sample-7, #sample-8 {width: 600px;border: 1px solid #aaa;}</style></head><body><h1>克隆方法</h1><div id="sample-1"></div><script type="text/javascript">var paper1 = Raphael("sample-1", 600, 100);var rect1 = paper1.rect(20, 20, 60, 40).attr({"fill": "green"});rect1.clone().attr({ "x": 100, "y": 50 });</script><h1>數據方法</h1><div id="sample-2"></div><script type="text/javascript">var paper2 = Raphael("sample-2", 600, 100);var rect2 = paper2.rect(20, 20, 60, 40).attr({"fill": "green"});rect2.data({ name: "張三", age: 18 });paper2.text(100, 20, "單擊元素刪除age值").attr({'font-size': 14, 'fill': 'red', 'text-anchor': 'start' });paper2.text(100, 50, "name: " + rect2.data("name") + ", age: " + rect2.data("age")).attr({'font-size': 11, 'fill': 'green', 'text-anchor': 'start' });rect2.click(function(e){ if(this.data("age") != undefined) this.removeData("age");paper2.text(100, 80, "name: " + this.data("name") + ", age: " + this.data("age")).attr({'font-size': 11, 'fill': 'blue', 'text-anchor': 'start' });});</script><h1>toFront()和toBack()方法</h1><div id="sample-3"></div><script type="text/javascript">var paper3 = Raphael("sample-3", 600, 100);var rect3 = paper3.rect(20, 20, 60, 40).attr({"fill": "green"});var circle3 = paper3.circle(80, 50, 30).attr({"fill": "red"});var ellipse3 = paper3.ellipse(40, 70, 30, 20).attr({"fill": "blue"});paper3.elements = [];paper3.elements.push(rect3);paper3.elements.push(circle3);paper3.elements.push(ellipse3);rect3.click(function(e){ if(paper3.elements[0] == this){this.toFront();paper3.elements.splice(0, 1);paper3.elements.push(this);}else if(paper3.elements[paper3.elements.length - 1] == this){this.toBack();paper3.elements.splice(0, 0, paper3.elements.pop());}});</script><h1>隱藏和顯示方法</h1><div id="sample-4"></div><script type="text/javascript">var paper4 = Raphael("sample-4", 600, 100);var rect4 = paper4.rect(20, 20, 60, 40).attr({"fill": "green"});var circle4 = paper4.circle(80, 50, 30).attr({"fill": "red"});rect4.click(function(e){this.hide();circle4.show();});circle4.click(function(e){this.hide();rect4.show();}); </script><h1>刪除元素方法</h1><div id="sample-5"></div><script type="text/javascript">var paper5 = Raphael("sample-5", 600, 100);var rect5 = paper5.rect(20, 20, 60, 40).attr({"fill": "green"});var circle5 = paper5.circle(80, 50, 30).attr({"fill": "red"});rect5.click(function(e){this.remove();});circle5.click(function(e){this.remove();}); </script><h1>清空畫布方法</h1><div id="sample-6"></div><script type="text/javascript">var paper6 = Raphael("sample-6", 600, 100);var rect6 = paper6.rect(20, 20, 60, 40).attr({"fill": "green"});var circle6 = paper6.circle(80, 50, 30).attr({"fill": "red"});rect6.click(function(e){paper6.clear();});circle6.click(function(e){paper6.clear();}); </script><h1>重新設置畫布的大小方法</h1><div id="sample-7"></div><script type="text/javascript">var paper7 = Raphael("sample-7", 600, 100);var rect7 = paper7.rect(20, 20, 60, 40).attr({"fill": "green"});rect7.click(function(e){paper7.setSize(800, 200)});</script><h1>set()方法</h1><div id="sample-8"></div><script type="text/javascript">var paper8 = Raphael("sample-8", 600, 100);var rect8 = paper8.rect(20, 20, 60, 40);var circle8 = paper8.circle(150, 50, 30);var ellipse8 = paper8.ellipse(260, 50, 40, 30);var raphaelSet = paper8.set();raphaelSet.push(rect8, circle8, ellipse8);var typeText = "[ ";raphaelSet.forEach(function(el){typeText += el.type + " ";});typeText += "]";paper8.text(400, 10, typeText);raphaelSet.splice(1, 2, ellipse8, circle8);typeText = "[ ";raphaelSet.forEach(function(el){typeText += el.type + " ";});typeText += "]";paper8.text(400, 30, typeText);raphaelSet.exclude(rect8);typeText = "[ ";raphaelSet.forEach(function(el){typeText += el.type + " ";});typeText += "]";paper8.text(400, 50, typeText);raphaelSet.pop();typeText = "[ ";raphaelSet.forEach(function(el){typeText += el.type + " ";});typeText += "]";paper8.text(400, 70, typeText);raphaelSet.clear();typeText = "[ ";raphaelSet.forEach(function(el){typeText += el.type + " ";});typeText += "]";paper8.text(400, 90, typeText);</script></body> </html>9.2. 效果圖
總結
以上是生活随笔為你收集整理的011_Raphael常用方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 010_Raphael事件
- 下一篇： 050_Unicode字符官方标准一