|
DOM是Web前端領(lǐng)域非常重要的組成部分，不僅在處理HTML元素時(shí)會(huì)用到DOM，圖形編程也同樣會(huì)用到,。比如SVG繪圖，各種圖形都是以DOM節(jié)點(diǎn)的形式插入到頁面中,，這就意味著可以使用DOM方法對(duì)圖形進(jìn)行操作,。比如有一個(gè)<path id="p1">元素，可以直接用jquery增加click事件$('#p1').click(function(){…})",。然而這種DOM處理方法在HTML5的Canvas里不再適用,，Canvas使用的是另外一套機(jī)制，無論在Canvas上繪制多少圖形,，Canvas都是一個(gè)整體,，圖形本身實(shí)際都是Canvas的一部分，不可單獨(dú)獲取,，所以也就無法直接給某個(gè)圖形增加JavaScript事件,。 Canvas的限制 在Canvas里，所有圖形都繪制在幀上,，繪制方法不會(huì)將繪制好的圖形元素作為一個(gè)返回值輸出,，js也無法獲取到已經(jīng)繪制好的圖形元素。比如： 復(fù)制代碼 代碼如下:cvs = document.getElementById('mycanvas'); ctx = canvas.getContext('2d'); theRect = ctx.rect(10, 10, 100, 100); ctx.stroke(); console.log(theRect); //undefined 這段代碼在canvas標(biāo)簽里繪制了一個(gè)矩形,，首先可以看到繪制圖形的rect方法沒有返回值,。如果打開瀏覽器的開發(fā)者工具，還可以看到canvas標(biāo)簽內(nèi)部沒有增加任何內(nèi)容,，而在js里獲取到的canvas元素以及當(dāng)前的上下文,，也都沒有任何表示新增圖形的內(nèi)容,。 所以，前端常用的dom方法在canvas里是不適用的,。比如點(diǎn)擊上面Canvas里的矩形,，實(shí)際點(diǎn)擊的是整個(gè)Canvas元素。 給Canvas元素綁定事件 由于事件只能達(dá)到Canvas元素這一層,，所以,，如果想進(jìn)一步深入，識(shí)別點(diǎn)擊發(fā)生在Canvas內(nèi)部的哪一個(gè)圖形上,，就需要增加代碼來進(jìn)行處理,?；舅悸肥牵航oCanvas元素綁定事件,，當(dāng)事件發(fā)生時(shí)，檢查事件對(duì)象的位置,，然后檢查哪些圖形覆蓋了該位置,。比如上面的例子里畫過一個(gè)矩形，該矩形覆蓋x軸10-110,、y軸10-110的范圍,。只要鼠標(biāo)點(diǎn)擊在這個(gè)范圍里，就可以視為點(diǎn)擊了該矩形,，也就可以手動(dòng)觸發(fā)矩形需要處理的點(diǎn)擊事件,。思路其實(shí)比較簡單，但是實(shí)現(xiàn)起來還是稍微有點(diǎn)復(fù)雜,。不僅要考慮這個(gè)判斷過程的效率,，有些地方還需要重新判斷事件類型，設(shè)置要重新定義一個(gè)Canvas內(nèi)部的捕獲和冒泡機(jī)制,。 首先要做的,，是給Canvas元素綁定事件，比如Canvas內(nèi)部某個(gè)圖形要綁定點(diǎn)擊事件,，就需要通過Canvas元素代理該事件： 復(fù)制代碼 代碼如下:cvs = document.getElementById('mycanvas'); cvs.addEventListener('click', function(e){ //... }, false); 接下來需要判斷事件對(duì)象發(fā)生的位置,，事件對(duì)象e的layerX和layerY屬性表示Canvas內(nèi)部坐標(biāo)系中的坐標(biāo)。但是這個(gè)屬性O(shè)pera不支持,，Safari也打算移除,，所以要做一些兼容寫法： 復(fù)制代碼 代碼如下:function getEventPosition(ev){ var x, y; if (ev.layerX || ev.layerX == 0) { x = ev.layerX; y = ev.layerY; } else if (ev.offsetX || ev.offsetX == 0) { // Opera x = ev.offsetX; y = ev.offsetY; } return {x: x, y: y}; } //注：使用上面這個(gè)函數(shù)，需要給Canvas元素的position設(shè)為absolute,。 現(xiàn)在有了事件對(duì)象的坐標(biāo)位置,，下面就要判斷Canvas里的圖形，有哪些覆蓋了這個(gè)坐標(biāo),。 isPointInPath方法 Canvas的isPointInPath方法可以判斷當(dāng)前上下文的圖形是否覆蓋了某個(gè)坐標(biāo),，比如： 復(fù)制代碼 代碼如下:cvs = document.getElementById('mycanvas'); ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.stroke(); ctx.isPointInPath(50, 50); //true ctx.isPointInPath(5, 5); //false 接下來增加一個(gè)事件判斷,，就可以判斷一個(gè)點(diǎn)擊事件是否發(fā)生在矩形上： 復(fù)制代碼 代碼如下:cvs.addEventListener('click', function(e){ p = getEventPosition(e); if(ctx.isPointInPath(p.x, p.y)){ //點(diǎn)擊了矩形 } }, false); 以上就是處理Canvas事件的基本方法，但是上面的代碼還有局限,，由于isPointInPath方法僅判斷當(dāng)前上下文環(huán)境中的路徑,，所以當(dāng)Canvas里已經(jīng)繪制了多個(gè)圖形時(shí)，僅能以最后一個(gè)圖形的上下文環(huán)境來判斷事件,，比如： 復(fù)制代碼 代碼如下:cvs = document.getElementById('mycanvas'); ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.rect(10, 10, 100, 100); ctx.stroke(); ctx.isPointInPath(20, 20); //true ctx.beginPath(); ctx.rect(110, 110, 100, 100); ctx.stroke(); ctx.isPointInPath(150, 150); //true ctx.isPointInPath(20, 20); //false 從上面這段代碼可以看到,，isPointInPath方法僅能識(shí)別當(dāng)前上下文環(huán)境里的圖形路徑，而之前繪制的路徑,，無法回溯判斷,。這種問題的解決方法是：當(dāng)點(diǎn)擊事件發(fā)生時(shí)，重繪所有圖形,，每繪制一個(gè)就使用isPointInPath方法,，判斷事件坐標(biāo)是否在該圖形覆蓋范圍內(nèi)。 循環(huán)重繪和事件冒泡 為了實(shí)現(xiàn)循環(huán)重繪,，所以就要將圖形的基本參數(shù)事先保存下來： 復(fù)制代碼 代碼如下:arr = [ {x:10, y:10, width:100, height:100}, {x:110, y:110, width:100, height:100} ]; cvs = document.getElementById('mycanvas'); ctx = canvas.getContext('2d'); draw(); function draw(){ ctx.clearRech(0, 0, cvs.width, cvs.height); arr.forEach(function(v){ ctx.beginPath(); ctx.rect(v.x, v.y, v.width, v.height); ctx.stroke(); }); } 上面的代碼事先將兩個(gè)矩形的基本參數(shù)保存下來,，每次調(diào)用draw方法，就會(huì)循環(huán)調(diào)用這些基本參數(shù),，用于繪制兩個(gè)矩形,。這里還使用了clearRect方法，用于在重繪時(shí)清空畫布,。接下來要做的是增加事件代理,，以及在重繪時(shí)對(duì)每一個(gè)上下文環(huán)境使用isPointInPath方法： 復(fù)制代碼 代碼如下:cvs.addEventListener('click', function(e){ p = getEventPosition(e); draw(p); }, false); 事件發(fā)生時(shí)，將事件對(duì)象的坐標(biāo)傳給draw方法處理,。這里還需要對(duì)draw方法做一些小改動(dòng)： 復(fù)制代碼 代碼如下:function draw(p){ var who = []; ctx.clearRech(0, 0, cvs.width, cvs.height); arr.forEach(function(v, i){ ctx.beginPath(); ctx.rect(v.x, v.y, v.width, v.height); ctx.stroke(); if(p && ctx.isPointInPath(p.x, p.y)){ //如果傳入了事件坐標(biāo),，就用isPointInPath判斷一下 //如果當(dāng)前環(huán)境覆蓋了該坐標(biāo)，就將當(dāng)前環(huán)境的index值放到數(shù)組里 who.push(i); } }); //根據(jù)數(shù)組中的index值,，可以到arr數(shù)組中找到相應(yīng)的元素,。 return who; } 在上面代碼中，點(diǎn)擊事件發(fā)生時(shí)draw方法會(huì)執(zhí)行一次重繪,，并在重繪過程中檢查每一個(gè)圖形是否覆蓋了事件坐標(biāo),，如果判斷為真，則視為點(diǎn)擊了該圖形,，并將該圖形的index值放入數(shù)組,，最后將數(shù)組作為draw方法的返回值。在這種處理機(jī)制下,，如果Canvas里有N個(gè)圖形,，它們有一部分是重疊的，而點(diǎn)擊事件恰巧發(fā)生在這個(gè)重疊區(qū)域上,，那么draw方法的返回?cái)?shù)組里會(huì)有N個(gè)成員,。這時(shí)就有點(diǎn)類似事件冒泡的情況,，數(shù)組的最后一個(gè)成員處于Canvas最上層，而第一個(gè)成員則在最下層,，我們可以視為最上層的成員是e.target,，而其他成員則是冒泡過程中傳遞到的節(jié)點(diǎn)。當(dāng)然這只是最簡單的一種處理方法,，如果真要模擬DOM處理,，還要給圖形設(shè)置父子級(jí)關(guān)系。 以上就是Canvas事件處理的基本方法,。在實(shí)際運(yùn)用時(shí),，如何緩存圖形參數(shù)，如何進(jìn)行循環(huán)重繪,，以及如何處理事件冒泡,，都還需要根據(jù)實(shí)際情況花一些心思去處理。另外,，click是一個(gè)比較好處理的事件,，相對(duì)麻煩的是mouseover,、mouseout和mousemove這些事件,，由于鼠標(biāo)一旦進(jìn)入Canvas元素，始終發(fā)生的都是mousemove事件,，所以如果要給某個(gè)圖形單獨(dú)設(shè)置mouseover或mouseout,，還需要記錄鼠標(biāo)移動(dòng)的路線，給圖形設(shè)置進(jìn)出狀態(tài),。由于處理的步驟變得復(fù)雜起來,，必須對(duì)性能問題提高關(guān)注。 |
|
|
