011_Raphael常用方法

最新推荐文章于 2023-01-18 09:30:00 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-01-18 09:30:00 发布

阅读量372

点赞数

分类专栏： html5游戏文章标签： css html

本文链接：https://blog.csdn.net/aihiao/article/details/118997212

版权

html5游戏专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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. 效果图