首頁 > web前端 > H5教程 > 主體

用仿ActionScript的語法來寫html5-第五篇,Graphics繪圖

黄舟
發布: 2017-01-17 16:44:30
原創
1368 人瀏覽過

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


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板