畫布元素有「改變」事件嗎？

Question

有沒有辦法將事件處理程序附加到canvas元素的更改？我需要在任何東西繪製任何東西時觸發一個函數。

Answer 1

不，canvas元素不提供任何事件，它只是一個普通的位圖。

如果您確實想要做到這一點，請劫持內置於您的事件中的context的所有呼叫，然後調用原始功能（您之前已經複製）。

我的建議：
不要這樣做，它會很慢，很難維護。取而代之的是改變應用程序的設計，例如，您可以製作自定義的繪圖功能，它將抽象畫布並將事件放入那裏。

當進行大量繪圖時，這還會帶來更少的context.*調用（因此更乾淨的代碼）。

Answer 2

我實際上會包裝畫布，如果需要跟蹤這些命令。這裏有一個簡單的例子只跟蹤了幾個方法：

function eventOnDraw(ctx, eventName){ 
    var fireEvent = function(){ 
    var evt = document.createEvent("Events"); 
    evt.initEvent(eventName, true, true); 
    ctx.canvas.dispatchEvent(evt); 
    } 
    var stroke = ctx.stroke; 
    ctx.stroke = function(){ 
    stroke.call(this); 
    fireEvent(); 
    }; 
    var fillRect = ctx.fillRect; 
    ctx.fillRect = function(x,y,w,h){ 
    fillRect.call(this,x,y,w,h); 
    fireEvent(); 
    }; 
    var fill = ctx.fill; 
    ctx.fill = function(){ 
    fill.call(this); 
    fireEvent(); 
    }; 
} 

... 

var myContext = someCanvasElement.getContext('2d'); 
someCanvasElement.addEventListener('blargle', myHandler, false); 
eventOnDraw(myContext, 'blargle'); 

Answer 3

對我來說，我附着在畫布上單擊事件，我能檢測是否有任何事情是畫布上繪製。

小提琴這裏 - http://jsfiddle.net/ashwyn/egXhT/2/

檢查文本//Event if Drawn，你會明白的地方。

Answer 4

您可以使用mouseup事件。

我用jQuery來做到這一點

$('canvas').on('mouseup', function() { 
    // Fire function! 
});