如何在Canvas中新增事件的方法範例

作為一個前端，為元素添加事件是一件司空見慣的事情。可是在Canvas中，其所畫的任何東西都是無法取得的，更別說添加事件，那麼我們對其就束手無策了嗎？當然不是的！我們在平時專案中肯定都用過許多Canvas的框架，我們發現事件在這些框架中已經使用的十分成熟了，而且並沒有特別嚴重的問題。那麼我們可以肯定的是，事件在Canvas中並不是一件無法觸及的事情。

我們都知道一個元素在觸發一個事件時，其滑鼠的位置基本上處於該元素之上，那麼我們就自然而然的想到透過當前滑鼠的位置以及物體所佔據的位置進行比對，從而我們就能得出該物體是否應觸發事件。這種方式比較簡單，我就不用程式碼示範了，不過既然我叫它傻瓜式的方式，很明顯它不是一個有效的解決方式。因為物體所佔據的位置並不一定是十分容易獲取，如果是矩形、圓形等我們還能透過一些簡單的公式獲取其佔據的位置，可是在複雜點的多邊形，甚至是多邊形的某些邊是弧線的，顯而易見，我們這時候再獲取其所佔據的位置時是一件極其複雜且難度極大的事情，所以這種方式只適合自己在做一些demo中使用，並不適用於大多數的情況。

既然上面這種方式碰壁了，那我們只能另闢蹊徑。在翻閱CanvasAPI的時候，找到了一個方法isPointInPath，似乎正是我們苦苦尋找的良藥。

isPointInPath的作用：顧名思義，我們直觀的可以知道該方法用於判斷點是否處於路徑當中。

isPointInPath的入參出參：ctx.isPointInPath([path, ]x, y [, fillRule])，此方法的參數有4個，其中path和fillRule為選填，x和y為必填。我們依序介紹4個參數。

path：看到這個參數，我開始以為是beginPath或closePath的回傳值，很可惜的是這兩個方法並沒有回傳值，查閱了資料後，發現是Path2D建構函式new的物件。 Path2D建構函數具體用法。不過可惜的是該方法可能由於相容性的問題，目前看了一些開源框架都還未使用。

x，y：這兩個參數很好理解，就是x軸和y軸的距離，要注意的是，其相對位置是Canvas的左上角。

fillRule：nonzero（預設），evenodd。非零環繞規則和奇偶規則是圖形學中判斷點是否處於多邊形內的規則，其中非零環繞規則是Canvas的預設規則。想具體了解這兩種規則的，可以自己去查閱資料，這裡就不增加篇幅介紹了。

上面介紹完了入參，那麼isPointInPath方法的出參想必大家都可以猜到了，就是true和false。

上一節介紹完isPointInPath方法後，我們現在就來使用它。

先來一個簡單的demo：

 const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d') ctx.beginPath() ctx.moveTo(10, 10) ctx.lineTo(10, 50) ctx.lineTo(50, 50 ) ctx.lineTo(50, 10) ctx.fillStyle= 'black' ctx.fill() ctx.closePath() canvas.addEventListener('click', function (e) { const canvasInfo = canvas.getBoundingClientRect() console.log(ctx.isPointInPath(e.clientX - canvasInfo.left, e.clientY - canvasInfo.top)) })

如圖所示，灰色部分為Canvas所佔據的區域，黑色為我們實際添加事件的區域，在我們點擊黑色區域後，實際也的確如我們所願，打印出來的值為true。似乎Canvas的事件監聽就這麼簡單的解決了，不過事情真有這麼簡單嗎。顯然是不可能的！我們再來舉個例子，這時候有兩個區域，我們需要分別給其綁定不同的事件：

 const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d') ctx.beginPath() ctx.moveTo(10, 10) ctx.lineTo(10, 50) ctx.lineTo(50, 50 ) ctx.lineTo(50, 10) ctx.fillStyle= 'black' ctx.fill() ctx.closePath() ctx.beginPath() ctx.moveTo(100, 100) ctx.lineTo(100, 150) ctx.lineTo(150, 150) ctx.lineTo(150, 100) ctx.fillStyle= 'red' ctx.fill() ctx.closePath() canvas.addEventListener('click', function (e) { const canvasInfo = canvas.getBoundingClientRect() console.log(ctx.isPointInPath(e.clientX - canvasInfo.left, e.clientY - canvas.top) ) })

這個時候，結果就不再如同我們所預期的一樣，當點擊其中黑色區域時，列印的值為false，點擊紅色區域時，列印的值為true。

其實原因很簡單，因為上述程式碼，我們實際創建了兩個Path，而isPointInPath方法實際只檢測當前點是否處於最後一個Path當中，而例子中紅色區域為最後一個Path，所以只有點擊紅色區域時，isPointInPath方法才能判斷為true。現在我們改造一下程式碼：

 const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d') let drawArray = [] function draw1 () { ctx.beginPath() ctx.moveTo(10, 10) ctx.line(10 , 50) ctx.lineTo(50, 50) ctx.lineTo(50, 10) ctx.fillStyle= 'black' ctx.fill() } function draw2 () { ctx.beginPath() ctx.moveTo(100, 100) ctx.lineTo(100, 150) ctxline.line. (150, 150) ctx.lineTo(150, 100) ctx.fillStyle= 'red' ctx.fill() ctx.closePath() } drawArray.push(draw1, draw2) drawArray.forEach(it => { it() }) canvas.addEventListener('click', function (e) { ctx.clearRect(0, 0, 400, 750) const canvasInfo = canvas.getBoundingClientRect() drawArray.forEach(it => { it() console.log(ctx.isPointInPath(e.clientX - canvasInfo.left, e.clientY - canvasInfo.top)) }) })

上面的程式碼我們進行了一個很大的改造，我們將每個Path放入到一個單獨的函數當中，並將它們push到一個數組當中。當觸發點擊事件時，我們清空Canvas，並遍歷數組重新繪製，每當繪製一個Path進行一次判斷，從而在調用isPointInPath方法時，我們能實時的獲取當前的最後一個Path，進而判斷出當前點所處的Path當中。

現在我們已經間接的實現了對每個Path的單獨事件監聽，可是其實現的方式需要一次又一次的重繪，那麼有辦法不需要重繪就能監聽事件嗎？

首先我們需要知道一次又一次重繪的原因是因為isPointInPath方法是監聽的最後一個Path，不過我們在介紹這個方法的時候，說過其第一個參數是一個Path對象，當我們傳遞了這個參數後，Path就不再去取最後一個Path而是使用我們傳遞進去的這個Path，現在我們來個demo來驗證其可行性：

 const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d') const path1 = new Path2D(); path1.rect(10, 10, 100,100); ctx.fill( new Path2D(); path2.moveTo(220, 60); path2.arc(170, 60, 50, 0, 2 * Math.PI); ctx.stroke(path2) canvas.addEventListener('click', function (e) { console.log(ctx.isPointInPath(path1 , e.clientX, e.clientY)) console.log(ctx.isPointInPath(path2, e.clientX, e.clientY)) })

如上圖所示，我們點擊了左邊圖形，列印true，false；點擊右邊圖形，列印false，true。印刷的結果顯示是沒有問題的，不過由於其相容性還有待加強，所以目前建議還是使用重繪方式來監聽事件。

Canvas的事件監聽講到這裡基本上就差不多了，原理很簡單，大家應該都可以掌握。

github地址，歡迎start

自己寫的一個demo

 const canvas = document.getElementById('canvas') class rectangular { constructor ( ctx, { top = 0, left = 0, width = 30, height = 50, background = 'red' } ) { this.ctx = ctxthis . top = top this.left = left this.width = width this.height = height this.background = background } painting () { this.ctx.beginPath() this.ctx.moveTo(this.left, this.top) this.ctx.lineTo(this.left + this.width, this.top) this.ctx.lineTo(this.left + this.width, this.top + this.height) this.ctx.lineTo(this.left, this.top + this.height) this.ctx.fillStyle = this.background this.ctx.fill() this.ctx.closePath() } adjust (left, 頂部) { this .left += left this.top += top } } class circle { constructor ( ctx, { center = [], radius = 10, background = 'blue' } ) { this.ctx = ctx this.center = [center[0] === undefined ? radius : center[0], center[1] === undefined ? radius : center [1]] this.radius = radius this.background = background } painting () { this.ctx.beginPath() this.ctx.arc(this.center[0], this.center[1], this.radius, 0, Math.PI * 2, false) this.ctx.fillStyle = this.background this.ctx.fill() this.ctx.closePath() } adjust (left, top) { this.center[0] += left this.center[1] += top } } class demo { constructor (canvas) { this.canvasInfo = canvas.getBoundingClientRect() this.renderList = [] this.ctx = canvas.getContext('2d') this.canvas = canvas this.rectangular = (config) => { let target = new rectangular(this.ctx, {...config}) this.addRenderList(target) return this } this.circle = (config) => { let target = new circle(this.ctx, {...config}) this .addRenderList(target) return this } this.addEvent() } addRenderList (target) { this.renderList.push(target) } itemToLast (index) { const lastItem = this.renderList.splice(index, 1)[0] this.renderList.push(lastItem) } painting () { this.ctx.clearRect(0, 0, this.canvasInfo.width, this.canvasInfo.height) this.renderList.forEach(it => it.painting()) } addEvent () { const that = this let startX, startY canvas.addEventListener('mousedown', e => { startX = e.clientX startY = e.clientY let choosedIndex = null this.renderList.forEach((it, index) = > { it.painting() if (this.ctx.isPointInPath(startX, startY)) { choosedIndex = index } }) if (choosedIndex !== null) { this.itemToLast(choosedIndex) } document.addEventListener('mousemove', mousemoveEventEvent) document.EventList ) }) function mousemoveEvent (e) { const target = that.renderList[that.renderList.length - 1] const currentX = e.clientX const currentY = e.clientY target.adjust(currentX - startX, currentY - startY) startX = currentX startY = curstartX, currentY - startY） ) } function mouseupEvent (e) { const target = that.renderList[that.renderList.length - 1] const currentX = e.clientX const currentY = e.clientY target.adjust(currentX - startX, currentY - startY) startX = currentX startY = currentY removeEventListener('mousemove', mousemoveEvent) document.removeEventListener('mouseup', mouseupEvent) } } } const yes = new demo(canvas) .rectangular({}) .rectangular({top: 60, left: 60, background: 'blueang}) . ({top: 30, left: 20, background: 'green'}) .circle() .circle({center: [100, 30], background: 'red', radius: 5}) .painting()

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。