HTML5 Canvas繪製的圖形的事件處理
DOM是Web前端領域非常重要的組成部分,不僅在處理HTML元素時會用到DOM,圖形程式設計也同樣會用到。比如SVG繪圖,各種圖形都是以DOM節點的形式插入到頁面中,這就意味著可以使用DOM方法對圖形進行操作。比如有一個<path id="p1">元素,可以直接用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繪製的圖形的事件處理
DOM是Web前端領域非常重要的組成部分,不僅在處理HTML元素時會用到DOM,圖形程式設計也同樣會用到。比如SVG繪圖,各種圖形都是以DOM節點的形式插入到頁面中,這就意味著可以使用DOM方法對圖形進行操作。比如有一個<path id="p1">元素,可以直
HTML5 高階之canvas 繪製圖形
canvas是HTML5中新增的標籤,像所有dom一樣,擁有自己的屬性、方法、和事件,其中就有繪圖的方法,js能夠呼叫它在網頁上完成繪圖。 canvas也是HTML5中最強大的特性之一,允許開發者使用動態和互動式方法在web上實現桌面應用程式的功能 canvas元素會
HTML5利用Canvas繪製圖形(繪製漸變、模式、變換)
繪製漸變 漸變是一種很普遍的視覺形象,能帶來視覺上的舒適感。在Canvas中,繪圖API提供了兩個原生的漸變方法,包括線性漸變和徑向漸變。漸變,在顏色集上使用逐步抽樣的演算法,可以應用的描邊樣式和填充樣式中。使用漸變需要三個步驟:首先是建立漸變物件;其次是設定漸變顏色和過渡
HTML5利用Canvas繪製圖形(使用影象、裁剪區域、使用文字。陰影效果和操作畫素)
使用影象 在canvas中插入影象 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</t
Canvas繪製圖形
1.Android 利用canvas畫各種圖形(點、直線、弧、圓、橢圓、文字、矩形、多邊形、曲線、圓角矩形) 參考: https://blog.csdn.net/u013831257/article/details/50556098 https://blog.csdn.net/qq_2175
canvas繪製圖形——圓弧與圓形
canvas 繪製圓弧 繪製圓弧使用 context.arc( ) 函式,包含六個引數。 context.arc( centerx,centery,radius, startingAngle,endingAngle, anticlockwise = false )
canvas繪製圖形——直線、多邊形、七巧板
前言 canvas 是 html5 中的一個新元素,主要用於圖形的繪製,通過 JavaScript 來控制。<canvas> 標籤定義一個圖形容器,也可以叫做畫布,通過 js 指令碼可以繪製出各種各樣的影象。 建立canvas 建立 canvas 只需要新增 canv
HTML 5 Canvas 繪製圖形影象
HTML5 Canvas HTML5 <canvas> 標籤定義圖形,比如圖表和其他影象,必須使用指令碼來繪製圖形。<canvas> 是 HTML 5 中的新標籤。 <canvas> 元素本身並沒有繪製能力,它僅僅是圖形的容器/畫布,必須使用指令碼(Jav
HTML5 Canvas的圖形變換
很多時候,我們繪製出一個圖形之後,並不能達到我們預期的效果,這個時候,適當地運用圖形的變換(transformations,如旋轉和縮放等),可以創建出大量複雜多變的圖形。 1、儲存和恢復Canvas狀態 Canvas指的是當前畫面的所有樣式、變形和裁切的一個快照,以堆的
通過html5 canvas繪製時鐘
最近一直在學習html5,學到了html5的canvas標籤,這個畫布真的是很強大,它有對應的javascript的api的支援,你可以在這個標籤裡面繪製任意的圖形,你也可以把圖片放在裡面,能夠做出很炫的效果。 言歸正傳,廢話不多說,首先,html,只一句
微信小程式開發—(八)canvas繪製圖形
一.小知識 (1).API介面 (2).context 物件的方法列表 二.步驟 wxml中: <canvas canvas-id="myCanvas" class=
HTML5 Canvas 繪製橢圓與橢圓弧的實現
由於HTML Canvas 2D Context標準中並沒有直接繪製橢圓與橢圓弧的方法,所以瀏覽器普遍沒有這個方法,不過,Chrome支援ellipse方法,至於從哪個版本開始支援的,我就未查證了。IE11,Edge, Firefox, Safari目前最新版都還不支援。
HTML5 canvas 繪製圓形
canvas繪製圓形的思路: 1、建立路徑 XXX.beginpath(); 2、建立圓形的路徑; 3、關閉路徑;XXX.closepath(); 路徑不關閉也能繪製出圖形 4、設定繪製樣式。 建立圓形路徑時需要用到物件的arc方法,方法定義如:XXX.arc(x,y,r
HTML5 canvas 繪製的文字如何換行?
HTML5 裡的 canvas 元素是一個圖形容器,我們可以通過 JavaScript 來控制它繪製各種文字和影象。 在使用 canvas 繪製某字串的時候,我們可能想要讓該字串在某處按要求換行。 這該怎麼實現呢? 你是不是想到了 JavaScript 裡
Html5 canvas 繪製彩票走勢圖
因需要 要實現一個類似彩票走勢圖的功能,初次學Html5 ,很多地方不明白,前段時間也發帖請教過這個問題,也是沒給個明確說話,在網上搜了很多,也沒有實現的例子,今天仔細研究了下,發現其實也不是很難,現將程式碼貼出來,共同學習! 先來一張效果圖: 實現的程式碼: <!
Activity啟動流程,介面繪製到事件處理的整個流程(基於Android6.0原始碼)(2)
void setLayoutParams(WindowManager.LayoutParams attrs, boolean newView) { synchronized (this) { ...... mWindowAttributes
Canvas繪圖——使用Canvas繪製圖形的基本教程
HTML5火的正熱,最近有個想法也是要用到HTML的相關功能,所以也要好好學習一把。 好好看了一下Canvas的功能,感覺HTML5在客戶端互動的功能性越來越強了,今天看了一下Canvas繪圖,下邊是幾個例項,記下以備後用。 1、使用Canvas繪製直線: &
HTML5 Canvas繪製環形進度條
最近比較迷戀canvas,加之做了一個個人網站,有用到環形進度條,記錄下來。 canvas中沒有直接繪製圓的方法,但有一個繪製弧線的context.arc方法, 下面講下用該方法如何繪製出圖片效果。 arc()方法介紹 context.arc(x,y,r,s
html5 canvas繪製圓形印章,以及與頁面互動
來源:https://www.cnblogs.com/hello-word1/p/5137626.html <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF
第一講:使用html5——canvas繪製奧運五環
<html> <head> <title>初識canvas</title> </head> <body> <canvas id="mc" width="400px" height