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

用仿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
点击上面的矩形和圆,看看鼠标事件准不准确
已标记关键词 清除标记
相关推荐
<p> <strong><span style="font-size:24px;">课程简介:</span></strong><br /> <span style="font-size:18px;">历经半个多月的时间,</span><span style="font-size:18px;">Debug</span><span style="font-size:18px;">亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。</span><span></span> </p> <p> <span style="font-size:18px;">其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,</span><span style="font-size:18px;">Debug</span><span style="font-size:18px;">还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程!</span><span></span> </p> <p> <br /> </p> <p> <span style="font-size:24px;"><strong>核心技术栈列表</strong></span><span style="font-size:24px;"><strong>:</strong></span> </p> <p> <br /> </p> <p> <span style="font-size:18px;">值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括</span><span style="font-size:18px;">Spring Boot</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Spring MVC</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Mybatis</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Mybatis-Plus</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Shiro(</span><span style="font-size:18px;">身份认证与资源授权跟会话等等</span><span style="font-size:18px;">)</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Spring AOP</span><span style="font-size:18px;">、防止</span><span style="font-size:18px;">XSS</span><span style="font-size:18px;">攻击、防止</span><span style="font-size:18px;">SQL</span><span style="font-size:18px;">注入攻击、过滤器</span><span style="font-size:18px;">Filter</span><span style="font-size:18px;">、验证码</span><span style="font-size:18px;">Kaptcha</span><span style="font-size:18px;">、热部署插件</span><span style="font-size:18px;">Devtools</span><span style="font-size:18px;">、</span><span style="font-size:18px;">POI</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Vue</span><span style="font-size:18px;">、</span><span style="font-size:18px;">LayUI</span><span style="font-size:18px;">、</span><span style="font-size:18px;">ElementUI</span><span style="font-size:18px;">、</span><span style="font-size:18px;">JQuery</span><span style="font-size:18px;">、</span><span style="font-size:18px;">HTML</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Bootstrap</span><span style="font-size:18px;">、</span><span style="font-size:18px;">Freemarker</span><span style="font-size:18px;">、一键打包部署运行工具</span><span style="font-size:18px;">Wagon</span><span style="font-size:18px;">等等,如下图所示:</span><span></span> </p> <img src="https://img-bss.csdn.net/201908070402564453.png" alt="" /> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <span style="font-size:24px;">课程内容与收益</span><span style="font-size:24px;">:</span><span></span> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070403452052.png" alt="" /> </p> <p> <span style="font-size:18px;">总的来说,</span><span style="font-size:18px;">本课程是一门具有很强实践性质的“项目实战”课程,即“</span><span style="font-size:18px;">企业应用员工角色权限管理平台</span><span style="font-size:18px;">”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于</span><span style="font-size:18px;">Shiro</span><span style="font-size:18px;">的资源授权实现员工</span><span style="font-size:18px;">-</span><span style="font-size:18px;">角色</span><span style="font-size:18px;">-</span><span style="font-size:18px;">操作权限、员工</span><span style="font-size:18px;">-</span><span style="font-size:18px;">角色</span><span style="font-size:18px;">-</span><span style="font-size:18px;">数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图:</span> </p> <p> <span></span> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070404285736.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <span style="font-size:18px;"><strong>以下为项目整体的运行效果截图:</strong></span> <span></span> </p> <img src="https://img-bss.csdn.net/201908070404538119.png" alt="" /> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405002904.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405078322.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405172638.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405289855.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405404509.png" alt="" /> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdn.net/201908070405523495.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p style="text-align:left;"> <span style="font-size:18px;">值得一提的是,在本课程中,</span><span style="font-size:18px;">Debug</span><span style="font-size:18px;">也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:</span><span></span> </p> <img src="https://img-bss.csdn.net/201908070406328884.png" alt="" /> <p> <br /> </p>
<p> <strong><span style="background-color:#FFFFFF;color:#E53333;font-size:24px;">本页面购买不发书!!!仅为视频课购买!!!</span></strong> </p> <p> <strong><span style="color:#E53333;font-size:18px;">请务必到</span></strong><a href="https://edu.csdn.net/bundled/detail/49?utm_source=banner"><strong><span style="color:#E53333;font-size:18px;">https://edu.csdn.net/bundled/detail/49</span></strong></a><strong><span style="color:#E53333;font-size:18px;">下单购买课+书。</span></strong> </p> <p> <span style="font-size:14px;">本页面,仅为观看视频页面,如需一并购买图书,请</span><span style="font-size:14px;">务必到</span><a href="https://edu.csdn.net/bundled/detail/49?utm_source=banner"><span style="font-size:14px;">https://edu.csdn.net/bundled/detail/49</span></a><span style="font-size:14px;">下单购买课程+图书!!!</span> </p> <p> <br /> </p> <p> <span style="font-size:14px;">疯狂Python精讲课程覆盖《疯狂Python讲义》全书的主体内容。</span> </p> <span style="font-size:14px;">内容包括Python基本数据类型、Python列表、元组和字典、流程控制、函数式编程、面向对象编程、文件读写、异常控制、数据库编程、并发编程与网络编程、数据可视化分析、Python爬虫等。</span><br /> <span style="font-size:14px;"> 全套课程从Python基础开始介绍,逐步步入当前就业热点。将会带着大家从Python基础语法开始学习,为每个知识点都提供对应的代码实操、代码练习,逐步过渡到文件IO、数据库编程、并发编程、网络编程、数据分 析和网络爬虫等内容,本课程会从小案例起,至爬虫、数据分析案例终、以Python知识体系作为内在逻辑,以Python案例作为学习方式,最终达到“知行合一”。</span><br />
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页