這篇文章主要介紹了HTML5 Canvas的事件處理介紹,本文講解了Canvas的限制、給Canvas元素綁定事件、isPointInPath方法、循環重繪和事件冒泡等內容,需要的朋友可以參考下
DOM是Web前端領域非常重要的組成部分,不僅在處理HTML元素時會用到DOM,圖形程式設計也同樣會用到。例如SVG繪圖,各種圖形都是以DOM節點的形式插入頁面中,這意味著可以使用DOM方法對圖形進行操作。例如有一個b0df1a4bdae36d21726841c97f474466元素,可以直接用jquery增加click事件$('#p1').click(function(){…})"。然而這種DOM處理方法在HTML5的Canvas裡不再適用,Canvas使用的是另外一套機制,無論在Canvas上繪製多少圖形,Canvas都是一個整體,圖形本身實際上都是Canvas的一部分,不可單獨獲取,所以也就無法直接給某個圖形增加JavaScript事件。
Canvas的限制
在Canvas裡,所有圖形都繪製在幀上,繪製方法不會將繪製好的圖形元素作為一個傳回值輸出,js也無法取得到已經繪製好的圖形元素。例如:
cvs = document.getElementById('mycanvas'); ctx = canvas.getContext('2d'); theRect = ctx.rect(10, 10, 100, 100); ctx.stroke(); console.log(theRect); //undefined
這段程式碼在canvas標籤裡繪製了一個矩形,首先可以看到繪製圖形的rect方法沒有回傳值。如果開啟瀏覽器的開發者工具,也可以看到canvas標籤內部沒有增加任何內容,而在js裡取得到的canvas元素以及目前的上下文,也都沒有任何表示新增圖形的內容。
所以,前端常用的dom方法在canvas裡是不適用的。例如點擊上面Canvas裡的矩形,實際點擊的是整個Canvas元素。
給Canvas元素綁定事件
由於事件只能達到Canvas元素這一層,所以,如果想進一步深入,識別點擊發生在Canvas內部的哪一個圖形上,就需要增加程式碼來處理。基本想法是:給Canvas元素綁定事件,當事件發生時,檢查事件物件的位置,然後檢查哪些圖形覆蓋了該位置。例如上面的例子裡畫過一個矩形,該矩形覆蓋x軸10-110、y軸10-110的範圍。只要滑鼠點擊在這個範圍裡,就可以視為點擊了該矩形,也就可以手動觸發矩形需要處理的點擊事件。思路其實比較簡單,但是實現起來還是稍微有點複雜。不僅要考慮這個判斷過程的效率,有些地方還需要重新判斷事件類型,設定要重新定義一個Canvas內部的捕獲和冒泡機制。
首先要做的,是給Canvas元素綁定事件,例如Canvas內部某個圖形要綁定點擊事件,就需要透過Canvas元素代理該事件:
cvs = document.getElementById('mycanvas'); cvs.addEventListener('click', function(e){ //... }, false);
接下來需要判斷事件物件發生的位置,事件物件e的layerX和layerY屬性表示Canvas內部座標系中的座標。但這個屬性Opera不支持,Safari也打算移除,所以要做一些相容寫法:
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}; }
//註:使用上面這個函數,需要給Canvas元素的position設為absolute。
現在有了事件物件的座標位置,下面就要判斷Canvas裡的圖形,有哪些覆蓋了這個座標。
isPointInPath方法
Canvas的isPointInPath方法可以判斷目前上下文的圖形是否覆寫了某個座標,例如:
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
接下來增加一個事件判斷,就可以判斷一個點擊事件是否發生在矩形上:
cvs.addEventListener('click', function(e){ p = getEventPosition(e); if(ctx.isPointInPath(p.x, p.y)){ //点击了矩形 } }, false);
以上就是處理Canvas事件的基本方法,但是上面的程式碼還有局限,由於isPointInPath方法僅判斷當前上下文環境中的路徑,所以當Canvas裡已經繪製了多個圖形時,僅能以最後一個圖形的上下文環境來判斷事件,例如
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方法僅能辨識目前情境環境裡的圖形路徑,而先前繪製的路徑,無法回溯判斷。這種問題的解決方法是:當點擊事件發生時,重繪所有圖形,每繪製一個就使用isPointInPath方法,判斷事件座標是否在該圖形覆蓋範圍內。
循環重繪與事件冒泡
為了實現循環重繪,所以就要將圖形的基本參數事先儲存下來:
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(); }); }
上面的程式碼事先將兩個矩形的基本參數保存下來,每次呼叫draw方法,就會循環呼叫這些基本參數,用於繪製兩個矩形。這裡也使用了clearRect方法,用於在重繪時清空畫布。接下來要做的是增加事件代理,以及在重繪時對每一個上下文環境使用isPointInPath方法:
cvs.addEventListener('click', function(e){ p = getEventPosition(e); draw(p); }, false);
事件發生時,將事件物件的座標傳給draw方法處理。這裡還需要對draw方法做一些小改動:
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)){ //如果传入了事件坐标,就用isPointInPath判断一下 //如果当前环境覆盖了该坐标,就将当前环境的index值放到数组里 who.push(i); } }); //根据数组中的index值,可以到arr数组中找到相应的元素。 return who; }
在上面代码中,点击事件发生时draw方法会执行一次重绘,并在重绘过程中检查每一个图形是否覆盖了事件坐标,如果判断为真,则视为点击了该图形,并将该图形的index值放入数组,最后将数组作为draw方法的返回值。在这种处理机制下,如果Canvas里有N个图形,它们有一部分是重叠的,而点击事件恰巧发生在这个重叠区域上,那么draw方法的返回数组里会有N个成员。这时就有点类似事件冒泡的情况,数组的最后一个成员处于Canvas最上层,而第一个成员则在最下层,我们可以视为最上层的成员是e.target,而其他成员则是冒泡过程中传递到的节点。当然这只是最简单的一种处理方法,如果真要模拟DOM处理,还要给图形设置父子级关系。
以上就是Canvas事件处理的基本方法。在实际运用时,如何缓存图形参数,如何进行循环重绘,以及如何处理事件冒泡,都还需要根据实际情况花一些心思去处理。另外,click是一个比较好处理的事件,相对麻烦的是mouseover、mouseout和mousemove这些事件,由于鼠标一旦进入Canvas元素,始终发生的都是mousemove事件,所以如果要给某个图形单独设置mouseover或mouseout,还需要记录鼠标移动的路线,给图形设置进出状态。由于处理的步骤变得复杂起来,必须对性能问题提高关注。
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
以上是關於HTML5 Canvas的事件處理的詳細內容。更多資訊請關注PHP中文網其他相關文章!