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常用方法相关推荐

30 个 php 操作 redis 常用方法代码例子
这篇文章主要介绍了 30 个 php 操作 redis 常用方法代码例子 , 本文其实不止 30 个方法 , 可以操作 string 类型. list 类型和 set 类型的数据 , 需要的朋友可以 ...
SearchRequestBuilder常用方法说明
SearchRequestBuilder常用方法说明 (1) setIndices(String... indices):上文中描述过,参数可为一个或多个字符串,表示要进行检索的index:(2) s ...
3-RACSignal 常用方法
RACSingal的常用方法一基本使用 1map // 0 创建信号提供者// RACSubject,既能发送信号,又能订阅信号// 多用于代理,相当于OC里的delegate或者回调blockR ...
AJAX 一些常用方法
AJAX 一些常用方法 abort() 停止当前请求 getAllResponseHeaders() 返回包含HTTP请求的所有响应头信息,其中响应头包括Content-Length,Date,URI ...
OC基础第四讲--字符串、数组、字典、集合的常用方法
OC基础第四讲--字符串.数组.字典.集合的常用方法字符串.数组.字典.集合有可变和不可变之分.以字符串为例,不可变字符串本身值不能改变,必须要用相应类型来接收返回值:而可变字符串调用相应地方法后, ...
vue——props的两种常用方法
vue--props的两种常用方法 1.实现父-->子的通信举例如下: 父组件 parent.vue <children :channel="object1"> ...
C#中静态方法的运用和字符串的常用方法（seventh day)
又来到了今天的总结时间,由于昨天在云和学院学的知识没有弄懂,今天老师又专门给我们非常详细地讲了一遍,在这里非常谢谢老师.O(∩_∩)O 话不多说,下面就开始为大家总结一下静态方法的运用和字符串的常用方 ...
考考基础部分，谈谈Java集合中HashSet的原理及常用方法
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章作者:工匠初心 cnblogs.com/LiaHon/p/1125 ...
OC中的NSNumber、NSArray、NSString的常用方法
和C语言不同,在Objective-C语言中,有单独的字符串类NSString.C语言中,string是由 char(ASCLL码)字符组成 OC中,字符串是由unichar(Unicode)字符组成 ...

011_Raphael常用方法

011_Raphael常用方法相关推荐

最新文章

热门文章