关键词:
用仿ActionScript的语法来编写html5——第五篇,Graphics绘图
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——第七篇,自定义按钮
第七篇,自定义按钮这次弄个简单点的,自定义按钮。其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了。下面是添加按钮的代码,functiongameInit(event){backLayer=newLSprite();addChild(backLayer);btn01=newLButton(newLBitmap(newLBitmapDat... 查看详情
用仿actionscript的语法来编写html5——第九篇,仿urlloader读取文件
第九篇,仿URLLoader读取文件先看看最后的代码functionreadFile(){urlloader=newLURLLoader();urlloader.addEventListener(LEvent.COMPLETE,readFileOk);urlloader.load("../file/test.txt","text");}functionreadFileOk(){mytxt.text 查看详情
用仿actionscript的语法来编写html5——第六篇,textfield与输入框
一,对比1,html5中首先看看在html5的canvas中的文字显示varcanvas=document.getElementById("myCanvas");varcontext=canvas.getContext("2d");context.font="40ptCalibri";context.fillStyle="#0000ff";context.fillText("文字测试!",50,1 查看详情
用仿actionscript的语法来编写html5——第一篇,显示一张图片
第一篇,显示一张图片一,代码对比as代码:publicvarloader:Loader;publicfunctionloadimg():void{loader=newLoader();loader.contentLoaderInfo.addEventListener(Event.COMPLETE,complete);loader.load(newURLRequest("10594855.png") 查看详情
用仿actionscript的语法来编写html5——第二篇,利用sprite来实现动画
上一篇,我已经模仿as,加入了LBitmap和LBitmapData类,并且用它们实现了静态图片的显示。这次用Sprite来动态显示图片。依然遵循上一篇对显示对象的处理的思路,添加LSprite类,并追加show方法,如下:functionLSprite(){varself=this;self.ty... 查看详情
用仿actionscript的语法来编写html5——终篇,legendforhtml5programming1.0开源库件
...Html5Programming1.0库件是什么?它是一个javascript库,它模仿了ActionScript的语法,用于html5的开发,目前实现的功能相对较少,还不能称之为引擎,希望将来可以作为html5的开源引擎,为html5开发者提供服务。二,LegendForHtml5Programming1.0... 查看详情
是否有一个 Actionscript 库可用于使用类似 xpath 的语法来定位显示列表中的 Flex 组件?
】是否有一个Actionscript库可用于使用类似xpath的语法来定位显示列表中的Flex组件?【英文标题】:IsthereanActionscriptlibrarythatcanbeusedtotargetFlexcomponentsinthedisplaylistusinganxpath-likesyntax?【发布时间】:2011-04-0603:06:40【问题描述】:我觉... 查看详情
HTML5 中的实时 SQL 语法高亮显示 [关闭]
】HTML5中的实时SQL语法高亮显示[关闭]【英文标题】:Real-timeSQLsyntaxhighlightinginHTML5[closed]【发布时间】:2013-01-2622:51:36【问题描述】:我想使用<textarea>标记或用JavaScript编写的替代标记,在我编写SQL语句时突出显示它们... 查看详情
语法错误 - rightparen - ActionScript 3 - 使用数组
】语法错误-rightparen-ActionScript3-使用数组【英文标题】:Syntaxerror-rightparen-ActionScript3-usinganarray【发布时间】:2017-10-1708:03:24【问题描述】:我正在创建一个自定义的AdobeConnect窗格,在AS3中进行简单的拖放操作-目前可以在Adob... 查看详情
actionscript3编写javascript注入的基本框架(代码片段)
在用 Actionscript 和 MXML 编写的 Flex 程序中调试内存泄漏的最佳方法是啥?
】在用Actionscript和MXML编写的Flex程序中调试内存泄漏的最佳方法是啥?【英文标题】:WhatisthebestwaytoDEBUGmemoryleaksinaFlexprogramwritteninActionscriptandMXML?在用Actionscript和MXML编写的Flex程序中调试内存泄漏的最佳方法是什么?【发布时间】... 查看详情
编写语法荧光笔
】编写语法荧光笔【英文标题】:Writingasyntaxhighlighter【发布时间】:2010-10-2300:07:45【问题描述】:我希望为我正在考虑从事的暑期项目编写自己的语法荧光笔,但我不知道如何编写自己的语法荧光笔。我知道那里有很多实现,... 查看详情
在没有网桥的情况下在javascript和actionscript库之间共享代码
我参与编写Flex/ActionScript库,将来我将参与用JavaScript编写相同的库。而不是用每种语言编写一个库并且必须单独维护它,我想知道是否有可能:1)用一种语言编写代码并将代码共享到另一种语言中,例如用JavaScript编写代码并在A... 查看详情
从 ActionScript 数组中删除所有元素的最佳方法?
】从ActionScript数组中删除所有元素的最佳方法?【英文标题】:BestwaytoremoveallelementsfromanActionScriptArray?【发布时间】:2010-12-0112:43:09【问题描述】:我正在用Flex/ActionScript编写一个应用程序,并且有许多Array类型的类成员变量来存... 查看详情
actionscript3基本开关...案例语法(代码片段)
html5如何用
...、包括css3.0html5.0js等、、html5.0较之前的版本修改了一些语法规则、、、你可以通过阅读书籍或者查询一些网站来看这些语法变动。。我常用的一个是http://www.w3school.com.cn/html5/正常的用html语言来编写代码就可以了<!doctypehtml>&l... 查看详情
子数涵数·flash——初识actionscript
一、什么是AS(ActionScript)ActionScript,简称AS,中译为“动作脚本语言”。用于在Flash上实现一些光用Flash无法实现的功能。在Flash界面下的动作面板中编写AS。二、时间轴控制命令初识AS,首先让我们来认识一下AS中的时间轴... 查看详情