用仿ActionScript的语法来编写html5——第五篇,Graphics绘图

原创 2011年09月15日 12:44:51
用仿ActionScript的语法来编写html5——第五篇,Graphics绘图


用仿ActionScript的语法来编写html5——第一篇,显示一张图片
http://blog.csdn.net/lufy_legend/article/details/6753032
用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画
http://blog.csdn.net/lufy_legend/article/details/6760812
用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动
http://blog.csdn.net/lufy_legend/article/details/6770713

用仿ActionScript的语法来编写html5——第四篇,继承与简单的rpg

http://blog.csdn.net/lufy_legend/article/details/6771962





canvas本身就是一个Graphics,可以直接进行绘图
在actionscript里面,每个Sprite都有一个Graphics,Shape我先不考虑了,它更容易实现些,
在Html5中,绘图都是绘在同一个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方法稍作修改
	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");
}


看一下成果吧,看不到效果的请下载支持html5的浏览器
http://fsanguo.comoj.com/html5/jstoas04/index.html
点击上面的矩形和圆,看看鼠标事件准不准确

用仿ActionScript的语法来编写html5——第五篇,Graphics绘图

用仿ActionScript的语法来编写html5——第五篇,Graphics绘图 用仿ActionScript的语法来编写html5——第一篇,显示一张图片 http://blog.cs...
  • lufy_Legend
  • lufy_Legend
  • 2011-09-15 12:44:51
  • 7288

ActionScript3.0 开源框架大全

3D引擎 注:对于3D引擎,渲染的效率和支持的渲染功能是很重要的,然而 在短短的文章中根本不可能做详细的介绍,特别是截图,很可能具有误导性,要了解更多应用案例以及技术演示的图片,请点击各个引擎的...
  • xingxinmanong
  • xingxinmanong
  • 2016-08-13 16:21:17
  • 561

用仿ActionScript的语法来编写html5——第七篇,自定义按钮

第七篇,自定义按钮 这次弄个简单点的,自定义按钮。 其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了。 下面是添加按钮的代码, function gameI...
  • lufy_Legend
  • lufy_Legend
  • 2011-09-21 18:41:44
  • 5207

html5初体验,canvas模拟window画图(还有未解决问题)

本次代码编写, body{font-size:70%;font-family:verdana,helvetica,arial,sans-serif;} .colorTable div{wi...
  • u012103056
  • u012103056
  • 2014-10-23 13:51:48
  • 455

<em>ActionScript</em>3.0

第1章 了解<em>ActionScript</em>3.0 1.1 <em>ActionScript</em>的历史 1.2 认识舞台和主时间轴...绘图与<em>Graphics</em>类 6.2.1 了解<em>Graphics</em>类 6.2.2 编写绘图代码的技巧 6.2.3...
  • 2018年03月18日 00:00

<em>ActionScript</em>开发人员指南中文版

处理错误错误处理基础知识错误类型 <em>ActionScript</em>中的错误处理使用Flash运行时的调试...使用绘图API 绘制API的基础 <em>Graphics</em>类绘制线条和曲线使用内置方法绘制形状创建渐变...
  • 2018年03月15日 00:00

java 中如何利用Graphics类绘图

 关于Graphics类的一个结论:Graphics类是所有图形上下文(Graphic context)的抽象基类,因此它是不能直接实例化的,那么为了使用Graphics类绘图,就必须创建其非抽象的子...
  • weigb
  • weigb
  • 2007-11-02 22:47:00
  • 9673

基于Qt Graphics View Framework的画图软件的实现思路

最近使用Qt开发了一个绘图软件,实现了拖动和放缩的功能。这里大体描述一下思路: 1、自定义类继承图形项: class MyItem : public QGraphicsItem 重写以下方...
  • wwj_ff
  • wwj_ff
  • 2015-11-24 15:56:00
  • 1754

<em>ActionScript</em> 3.0 编程

. . . . . 2 第 2 章: <em>ActionScript</em> 3.0 简介关于 <em>ActionScript</em> . . ....265 了解 <em>Graphics</em> 类. . . . . . . . . . . . . . . . . . ...
  • 2018年03月16日 00:00

actionScript中使用形状、遮罩、混合和滤镜

一、形状类Shape 1.创建Shape类对象,调用其graphics属性,在调用其相应的方法进行绘制即可。   二、对对象应用动态遮罩 1.使用遮罩需要明白三点,1)需要被遮罩的显示对象(谁要被遮罩...
  • jinxiumeihappy
  • jinxiumeihappy
  • 2013-11-08 12:16:37
  • 997
收藏助手
不良信息举报
您举报文章:用仿ActionScript的语法来编写html5——第五篇,Graphics绘图
举报原因:
原因补充:

(最多只允许输入30个字)