HTML5 Canvas的事件處理介紹

這篇文章主要介紹了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，还需要记录鼠标移动的路线，给图形设置进出状态。由于处理的步骤变得复杂起来，必须对性能问题提高关注。

以上是HTML5 Canvas的事件處理介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！