用仿ActionScript的语法来编写html5——第五篇,Graphics绘图
用仿ActionScript的语法来编写html5——第五篇,Graphics绘图
canvas本身就是一个Graphics,可以直接进行绘图
在actionscript里面,每个Sprite都有一个Graphics,Shape我先不考虑了,它更容易实现些,
在Html5中,绘图都是绘在同一个canvas上面的,所以我们现在需要考虑两个问题,
1,如何把每个Sprite里的Graphics在不同的时刻,画在同一个地方
2,因为我们现在在不停的刷新页面,所以如果我们用Graphics绘图,那么它也需要不断的刷新
那我现在依然先假设,每一个Sprite储存的Graphics,只保存一些绘图的命令,而这些绘图命令绘图的时候,全都绘在canvas上
那么按照假设,我需要一个保存这些绘图命令的数组或者类
我现在建一个LGraphics类,这个类里面应该包含绘图指令,和show方法
我在绘图的时候,把绘图指令全部添加到setList里面,然后调用show方法,进行绘图
另外还有一个showList,用来保存绘图的区域,作用一会就知道了
下面来解决指令如何储存的问题
给LGraphics添加方法
三个方法分别是画一条线,一个矩形,一个圆
因为我储存的指令是function
所以,我绘图的时候,可以直接调用方法
所以,将show方法稍作修改
这样绘图类就完成了,完整类一会儿请看源代码
接着,在LSprite的构造器里面加上self.graphics = new LGraphics();就可以随时进行绘图了
代码如下
其实,还缺点东西,因为鼠标点击LSprite判断的时候,我只判断了LSprite里保存的bitmap等,如果LSprite里面绘了图,点击的时候,也应该响应鼠标事件的,所以需要判断点击的位置是否在绘制的区域
其实,也简单,给LGraphics添加一个ismouseon方法,来判断是否被点击就可以了
在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;
- border-style: none none none solid; border-left-width: 3px; border-left-color: #6ce26c; line
-
www.365128.com/user/aqiandao/54.html
www.365128.com/user/aqiandao/55.html
www.365128.com/user/aqiandao/57.html
www.365128.com/user/aqiandao/58.html
www.365128.com/user/aqiandao/59.html
www.365128.com/user/aqiandao/62.html
www.365128.com/user/aqiandao/63.html
www.365128.com/user/aqiandao/64.html
www.365128.com/user/aqiandao/65.html
www.365128.com/user/aqiandao/66.html
www.365128.com/user/aqiandao/67.html
www.365128.com/user/aqiandao/68.html
www.365128.com/user/aqiandao/70.html