Nesne yönelimli programlama ve onmousedown işleviyle ilgili sorun

Question

html5 tuvaliyle çizim uygulaması yapıyorum. OOP kullanmaya çalışıyorum ve tüm global değişkenlerden kaçınıyorum. Bir PainLab sınıf ve bir çizim dersi

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

Ona, burada tuval tıklayarak kullanıcı için bir olay dinleyicisi var görebileceğiniz gibi neyi MouseDown işlevidir var.

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

Bu kodu kullanırsam, clientX/Y ve paintLab tanımlanmamıştır. Büyük olasılıkla PaintLab() 'ın kapsamı bu bilgiyi siler ama bunun üstesinden gelmenin en iyi yolu nedir? Herhangi bir yardım için minnettarım!

Answer 1

Yalnızca olay nesnesi MouseDown işlevine iletilir. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

hedefi: bir options nesne olması gerekiyordu ve dördüncü bağımsız değişken yalnızca Gecko/Mozilla içindir - Sana addEventListener üçüncü argüman olarak self ileterek olacağını düşündüğünü emin değilim .addEventListener (tür, dinleyici [, useCapture, wantsUntrusted]);

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

Sonra MouseDown yılında, içinde this: // Gecko/Mozilla sadece

Her durumda

, ne yapmak edebilirsiniz işlevi çalışacağı altında bağlamını ayarlamak için bind() kullanmaktır işlev PaintLab'un geçerli örneğine başvurur. Ancak, yapınızı yeniden düşünmenizi öneririm. Eğer bir yerde canvas beyan gerekebilir

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

yapmak yerine bind() ile karıştırmasını self başvurabileceğiniz Bu şekilde ...

Not: PaintLab bir nesne ve MouseDown o nesnenin bir yöntem yapın Orada, ama senin için bir egzersiz olarak bırakacağım :).