Problem mit objektorientierter Programmierung und Onmousedown-Funktion

Question

Ich mache eine Zeichnungsanwendung mit dem HTML5 Canvas. Ich versuche, OOP zu verwenden und alle globalen Variablen zu vermeiden. Ich habe eine PainLab Klasse und eine Zeichenklasse

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 }; 
}; 

Wie Sie Ich habe ein Ereignis-Listener für den Benutzer hier die Leinwand klicken sehen kann, ist, was die MouseDown- Funktion.

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  
    } 
}; 

Wenn ich diesen Code verwende, sind clientX/Y und paintLab nicht undefiniert. Am wahrscheinlichsten löscht PaintLab() 's Bereich diese Informationen, aber was ist der beste Weg, dies zu überwinden? Ich schätze jede Hilfe!

Answer 1

Nur das Ereignisobjekt wird an die Funktion MouseDown übergeben. Ich bin mir nicht sicher, was Sie, indem self als drittes Argument an addEventListener passiert, denken - es soll ein options Objekt sein, und das vierte Argument für Gecko/Mozilla nur: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Ziel .addEventListener (type, listener [, useCapture, willsUntrusted]); // Gecko/Mozilla nur

Auf jeden Fall, was Sie können, ist bind() tun zu verwenden, den Kontext zu setzen, unter dem Ihre Funktion ausgeführt werden soll:

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

Dann in MouseDown, die this der Die Funktion bezieht sich auf die aktuelle Instanz PaintLab.

---

Allerdings würde ich vorschlagen, dass Sie Ihre Struktur überdenken. Machen PaintLab ein Objekt, und MouseDown- eine Methode des Objekts:

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  
      } 
     } 
    } 
})(); 

diese Weise können Sie nur self statt Herumspielen verweisen kann mit bind() ...

Beachten Sie, dass Sie benötigen canvas irgendwo in erklären da, aber ich überlasse das als Übung für dich :).