有沒有辦法將事件處理程序附加到canvas
元素的更改?我需要在任何東西繪製任何東西時觸發一個函數。畫布元素有「改變」事件嗎?
4
A
回答
5
不,canvas
元素不提供任何事件,它只是一個普通的位圖。
如果您確實想要做到這一點,請劫持內置於您的事件中的context
的所有呼叫,然後調用原始功能(您之前已經複製)。
我的建議:
不要這樣做,它會很慢,很難維護。取而代之的是改變應用程序的設計,例如,您可以製作自定義的繪圖功能,它將抽象畫布並將事件放入那裏。
當進行大量繪圖時,這還會帶來更少的context.*
調用(因此更乾淨的代碼)。
0
我實際上會包裝畫布,如果需要跟蹤這些命令。這裏有一個簡單的例子只跟蹤了幾個方法:
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');
0
對我來說,我附着在畫布上單擊事件,我能檢測是否有任何事情是畫布上繪製。
小提琴這裏 - http://jsfiddle.net/ashwyn/egXhT/2/
檢查文本//Event if Drawn
,你會明白的地方。
1
相關問題
- 1. 畫布內元素中的事件
- 2. 關鍵事件改變背景畫布
- 3. DOM元素佈局更改事件
- 4. HTML5畫布 - 畫出同樣的事情在所有畫布元素通過
- 5. 族元素爲在事件=「改變」
- 6. 「文檔畫布」與「畫布元素」相同嗎?
- 7. 動畫HTML畫布元素
- 8. 畫布元素undefined
- 9. 一個畫布元素的3D變換
- 10. 動畫元素,當他們改變位置(響應佈局)
- 11. 選擇元素的事件偵聽器沒有改變值
- 12. 將觸摸事件分配給畫布內的元素 - iPad
- 13. 如何在畫布元素上觸發事件
- 14. 用KeyDown事件在畫布上的光滑元素運動UWP
- 15. 我可以在不破壞先前繪製的畫布元素的情況下畫一個畫布元素嗎?
- 16. 訪問沒有ID的畫布元素
- 17. 改變div元素帆布問題html2canvas
- 18. 畫布和事件
- 19. 畫布重疊元素
- 20. 畫布 - 元素覆蓋
- 21. 打印HTML5畫布元素
- 22. MooTools jQuery與畫布元素
- 23. 從畫布獲取元素
- 24. 畫布元素不更新
- 25. HTML5畫布元素樣式?
- 26. 覆蓋HTML畫布元素
- 27. 類似畫布的元素
- 28. 瞭解HTML5畫布元素
- 29. 移動HTML5畫布元素
- 30. 繪製到畫布%元素