用仿ActionScript的文法來編寫html5——第五篇，Graphics繪圖

標籤：下載   lsp   alpha   sha   end   地方   html5   key   action   

用仿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——第五篇，Graphics繪圖