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，您将了解其中的位置。

canvas元素是否有“更改”事件？

3 个答案: