Question

我正在使用html5画布制作绘图应用程序。我试图使用OOP并避免所有全局变量。我有一个PainLab类和一个绘图类

var PaintLab = function() {
   this.drawing = new Drawing();
   //Define some methods
   var self = this;
   canvas.addEventListener('click', MouseDown, self, false);
};

var Drawing = function() {
   this.position = { x: 4, y: 200 };
   this.size = { width: 500, height: 500 };
};

正如你所看到的，我为用户点击画布提供了一个事件监听器，这就是MouseDown的功能。

var MouseDown = function(paintLab, evt) {
  var mouseX = evt.clientX;
  var mouseY = evt.clientY;
  //Check is user clicked the drawing which is a square element on the canvas
  if (x >= paintLab.drawing.position.x && x <= paintLab.position.x + paintLab.drawing.size.width &&
    y >= paintLab.drawing.position.y && y <= paintLab.position.y + paintLab.drawing.size.height) {
    //Draw to canvas    
  }
};

如果我使用此代码，则clientX / Y和paintLab将被取消。很可能PaintLab（）的范围删除了这些信息，但克服这个问题的最佳方法是什么？我感谢任何帮助！

Answer 1

仅将事件对象传递给MouseDown函数。我不确定您将self作为第三个参数传递给addEventListener会发生什么 - 它应该是options个对象，第四个参数仅适用于Gecko / Mozilla：bind()

target.addEventListener（type，listener [，useCapture，wantsUntrusted]）; //仅限Gecko / Mozilla

在任何情况下，您可以使用{{3}}来设置运行函数的上下文：

canvas.addEventListener('click', MouseDown.bind(self));

然后，在MouseDown中，函数的this将引用PaintLab的当前实例。

但是，我建议你重新考虑你的结构。使PaintLab成为对象，MouseDown成为该对象的方法：

var PaintLab = (function() {
    var self = this;
    canvas.addEventListener('click', self.MouseDown);
    return {
        MouseDown: function(evt) {
            var mouseX = evt.clientX;
            var mouseY = evt.clientY;
            //Check is user clicked the drawing
            if (mouseX >= self.drawing.position.x && mouseX <= self.position.x + self.drawing.size.width &&
                mouseY >= self.drawing.position.y && mouseY <= self.position.y + self.drawing.size.height) {
                //Draw to canvas    
            }
        }
    }
})();

这样你就可以引用self而不是弄乱bind() ......

请注意，您可能需要在其中的某处声明canvas，但我会将其作为练习留给您：）。

面向对象编程和onmousedown函数的问题

1 个答案: