ActionScript 를 모방 한 문법 으로 html 5-다섯 번 째,Graphics 그림 을 작성 합 니 다.

ActionScript 를 모방 한 문법 으로 html 5-다섯 번 째,Graphics 그림 을 작성 합 니 다.
ActionScript 를 모방 한 문법 으로 html 5-첫 번 째 편 을 작성 하여 그림 을 표시 합 니 다.
http://blog.csdn.net/lufy_legend/article/details/6753032
ActionScript 를 모방 한 문법 으로 html 5-두 번 째 편 을 작성 하고 Sprite 를 이용 하여 애니메이션 을 실현 합 니 다.
http://blog.csdn.net/lufy_legend/article/details/6760812
html 5-세 번 째,마우스 이벤트 와 게임 캐릭터 이동
http://blog.csdn.net/lufy_legend/article/details/6770713
ActionScript 를 모방 한 문법 으로 html 5-네 번 째 편,계승 과 간단 한 rpg 를 작성 합 니 다.
http://blog.csdn.net/lufy_legend/article/details/6771962
canvas 자체 가 그래 픽 이 므 로 직접 그림 을 그 릴 수 있 습 니 다.
actionscript 에서 모든 Sprite 에는 Graphics 가 있 습 니 다.Shape 는 제 가 먼저 고려 하지 않 겠 습 니 다.이 는 더욱 쉽게 이 루어 집 니 다.
Html 5 에서 그림 은 모두 같은 canvas 위 에 그 려 져 있 기 때문에 우 리 는 지금 두 가지 문 제 를 고려 해 야 합 니 다.
1.어떻게 모든 Sprite 의 Graphics 를 다른 시각 에 같은 곳 에 그립 니까?
2.우 리 는 지금 끊임없이 페이지 를 새로 고치 고 있 기 때문에 만약 에 우리 가 Graphics 로 그림 을 그린다 면 그것 도 계속 새로 고침 해 야 합 니 다.
그러면 저 는 아직도 모든 Sprite 에 저 장 된 Graphics 가 그림 을 그 리 는 명령 만 저장 하고 이 그림 명령 들 이 그림 을 그 릴 때 모두 canvas 에 그 려 진다 고 가정 합 니 다.
그렇다면 가설 에 따 르 면 그림 명령 을 저장 하 는 배열 이나 클래스 가 필요 합 니 다.
저 는 지금 LGraphics 클래스 를 만 들 고 있 습 니 다.이 클래스 에는 그림 그리 기 명령 과 show 방법 이 포함 되 어 있어 야 합 니 다.

function LGraphics(){
	var self = this;
	self.type = "LGraphics";
	self.color = "#000000";
	self.i = 0;
	self.alpha = 1;
	self.setList = new Array();
	self.showList = new Array();
}
LGraphics.prototype = {
	show:function (){
		var self = this;
		if(self.setList.length == 0)return;
		//  
	}
}

그림 을 그 릴 때 그림 그리 기 명령 을 모두 setList 에 추가 한 다음 show 방법 을 사용 하여 그림 을 그립 니 다.
또 하나의 showList 가 있어 그림 을 그 리 는 구역 을 저장 하 는데 사용 되 며,역할 은 잠시 후에 알 수 있 습 니 다.
다음은 명령 이 어떻게 저장 되 는 지 에 대한 문 제 를 해결 하 겠 습 니 다.
LGraphics 에 추가 하 는 방법

drawLine:function (thickness,lineColor,pointArray){
		var self = this;
		self.setList.push(function(){
			LGlobal.canvas.beginPath();
			LGlobal.canvas.moveTo(pointArray[0],pointArray[1]);
			LGlobal.canvas.lineTo(pointArray[2],pointArray[3]);
			LGlobal.canvas.lineWidth = thickness;
			LGlobal.canvas.strokeStyle = lineColor;
			LGlobal.canvas.closePath();
			LGlobal.canvas.stroke();
		});
	},
	drawRect:function (thickness,lineColor,pointArray,isfill,color){
		var self = this;
		self.setList.push(function(){
			LGlobal.canvas.beginPath();
			LGlobal.canvas.rect(pointArray[0],pointArray[1],pointArray[2],pointArray[3]);
			if(isfill){
				LGlobal.canvas.fillStyle = color;
				LGlobal.canvas.fill();
			}
			LGlobal.canvas.lineWidth = thickness;
			LGlobal.canvas.strokeStyle = lineColor;
			LGlobal.canvas.stroke();
		});
		self.showList.push({type:"rect",value:pointArray});
	},
	drawArc:function(thickness,lineColor,pointArray,isfill,color){
		var self = this;
		self.setList.push(function(){
			LGlobal.canvas.beginPath();
			LGlobal.canvas.arc(pointArray[0],pointArray[1],pointArray[2],pointArray[3],pointArray[4],pointArray[5]);
			if(isfill){
				LGlobal.canvas.fillStyle = color;
				LGlobal.canvas.fill();
			}
			LGlobal.canvas.lineWidth = thickness;
			LGlobal.canvas.strokeStyle = lineColor;
			LGlobal.canvas.stroke();
		});
		self.showList.push({type:"arc",value:pointArray});
	}

세 가지 방법 은 각각 선 하나,직사각형 하나,원 하 나 를 그 리 는 것 이다.
제 가 저장 한 지령 은 function 이 니까 요.
그래서 제 가 그림 을 그 릴 때 방법 을 직접 호출 할 수 있 습 니 다.
그래서 쇼 방법 을 조금 수정 하 겠 습 니 다.

	show:function (){
		var self = this;
		if(self.setList.length == 0)return;
		var key;
		for(key in self.setList){
			self.setList[key]();
		}
	}

이렇게 그림 클래스 가 완성 되 었 습 니 다.전체 클래스 는 잠시 후에 소스 코드 를 보십시오.
이 어 LSprite 의 구조 기 에 self.graphics=new LGraphics()를 추가 합 니 다.언제든지 그림 을 그 릴 수 있 습 니 다.
코드 는 다음 과 같다.

backLayer = new LSprite();
	addChild(backLayer);
	//   
	backLayer.graphics.drawRect(1,"black",[20, 20, 150, 20],true,"#cccccc");
	//     
    	backLayer.graphics.drawArc(2,"black",[100, 100, 50, 0,2*Math.PI,false],true,"#FF0000");
	//    
	backLayer.graphics.drawLine(2,"#FF0000",[200, 20, 100, 50]);

사실 단점 이 있 습 니 다.LSprite 판단 을 마우스 로 눌 렀 을 때 LSprite 에 저 장 된 bitmap 등 만 판 단 했 기 때문에 LSprite 에 그림 이 그 려 져 있 으 면 클릭 할 때 도 마우스 이벤트 에 응 해 야 하기 때문에 클릭 한 위치 가 그 려 진 영역 에 있 는 지 판단 해 야 합 니 다.
사실,간단 합 니 다.LGraphics 에 ismouseon 방법 을 추가 하여 클릭 여 부 를 판단 하면 됩 니 다.

ismouseon:function(event,cood){
		var self = this;
		var key;
		for(key in self.showList){
			if(self.showList[key].type == "rect"){
				if(event.offsetX >= self.showList[key].value[0] + cood.x && event.offsetX <= self.showList[key].value[0] + cood.x + self.showList[key].value[2] && 
					event.offsetY >= self.showList[key].value[1] + cood.y && event.offsetY <= self.showList[key].value[1] + cood.y + self.showList[key].value[3]){
					return true;
				}
			}else if(self.showList[key].type == "arc"){
				var xl = self.showList[key].value[0] + cood.x - event.offsetX;
				var yl = self.showList[key].value[1] + cood.y - event.offsetY;
				return xl*xl+yl*yl <= self.showList[key].value[2]*self.showList[key].value[2];
			}
		}
		
		return false;
	}

showList 에 그림 을 그 리 는 영역 크기 가 저장 되 어 있 습 니 다.이제 도움 이 되 었 습 니 다.

init(80,"mylegend",800,480,main);


var backLayer;
function main(){
	legendLoadOver();
	
	backLayer = new LSprite();
	addChild(backLayer);
	
	//   
	backLayer.graphics.drawRect(1,"black",[20, 20, 150, 20],true,"#cccccc");
	//     
    	backLayer.graphics.drawArc(2,"black",[100, 100, 50, 0,2*Math.PI,false],true,"#FF0000");
	//    
	backLayer.graphics.drawLine(2,"#FF0000",[200, 20, 100, 50]);
	//      
	backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);
}


function onmousedown(event){
	alert("isclick");
}

성 과 를 보 세 요.효과 가 보이 지 않 는 html 5 를 지원 하 는 브 라 우 저 를 다운로드 하 세 요.
http://fsanguo.comoj.com/html5/jstoas04/index.html
위의 사각형 과 원 을 클릭 하여 마우스 이벤트 가 정확 한 지 확인 하 세 요.