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)!