DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> HTML5 Canvas的事件處理介紹
HTML5 Canvas的事件處理介紹
編輯:HTML5教程     

   HTML5 Canvas的事件處理介紹

       DOM是Web前端領域非常重要的組成部分,不僅在處理HTML元素時會用到DOM,圖形編程也同樣會用到。比如SVG繪圖,各種圖形都是以DOM節點的形式插入到頁面中,這就意味著可以使用DOM方法對圖形進行操作。比如有一個 元素,可以直接用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,還需要記錄鼠標移動的路線,給圖形設置進出狀態。由於處理的步驟變得復雜起來,必須對性能問題提高關注。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved