欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-02 19:02:49
  用仿actionscript的语法来编写html5——第五篇,graphics绘图   用仿actionscript的语法来编写html5&m...

 

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

 

用仿actionscript的语法来编写html5——第一篇,

用仿actionscript的语法来编写html5——第二篇,利用sprite来实现动画

用仿actionscript的语法来编写html5——第三篇,鼠标事件与游戏人物移动

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

 

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添加一个ismoun方法,来判断是否被点击就可以了

 

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

点击上面的矩形和圆,看看鼠标事件准不准确


 

摘自 lufy小屋