用仿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");  
}

以上就是用仿ActionScript的語法來編寫html5——第五篇，Graphics繪圖的內容，更多相關內容請關注PHP中文網（www.php.cn）！