Klasse nicht auf Leinwand zeichnen

Question

Ich habe versucht, auf einer Leinwand mit dem neuen Ecma6 Klassensystem zu zeichnen, aber nach viel Forschung will es einfach nicht funktionieren. Ich übergebe den Kontext als Parameter der Zeichenfunktion, selbst wenn ich den Kontext logge, heißt es nicht, dass es leer oder undefiniert ist. Kann jemand von euch nette Leute mir helfen?

Dies ist mein Code:

class Canvas { 
    constructor() { 
     this.canvas = document.getElementById('canvas'); 
     this.context = this.canvas.getContext('2d'); 
     this.width = this.canvas.width; 
     this.height = this.canvas.height; 
     this.components = []; 
    } 

    draw() { 
     this.context.clearRect(0, 0, this.width, this.height); 
     this.context.globalCompositeOperation = 'hard-light'; 

     this.components.map(e => e.draw(this.context)); 

     window.requestAnimationFrame(this.draw.bind(this)); 
    } 

    add(e) { 
     this.components.push(e); 

     this.components.sort(function (a, b) { 
      return a.layer - b.layer; 
     }); 
    } 

    listeners() { 
     window.addEventListener('resize',() => { 
      this.width = this.canvas.width; 
      this.height = this.canvas.height; 
     }, false); 
    } 

    init() { 
     this.listeners(); 
     this.draw(); 
    } 
} 

class CanvasElement { 
    constructor(x, y, height, width, layer) { 
     this.position = { 
      x: x, 
      y: y 
     } 
     this.height = height; 
     this.width = width; 
     this.layer = layer; 
     this.color = "grey"; 
    } 

    draw(context) { 
     context.fillStyle = this.color; 
     context.fillRect(this.x, this.y, this.width, this.height); 
    } 
} 

class CanvasImage extends CanvasElement { 
    constructor(x, y, image, context) { 
     super(x, y, image.width, image.height, 0); 
     let self = this; 
     this.image = new Image(); 
     this.image.onload = function() { 
      self.imageReadyToUse = true; 
      self.width = this.width; 
      self.height = this.height; 
     } 
     this.image.src = image; 
     this.imageReadyToUse = false; 

    } 

    draw(context) { 
     if (this.imageReadyToUse) { 
      context.drawImage(this.image, this.x, this.y); 
     } 
    } 
} 

Answer 1

Ihre Fehler auf der Position liegt in der drawImage Methode. Ihre this.x und this.y Werte sind undefined.

Hier ist ein funktionierendes Beispiel:

var imageURL = "data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/+MjMUcAN8zM/9wcM8ZGcATEL+QePdZWf/29uc/P9cmJu9MTDImIN+/r7+/vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo+Pj/+pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP+8vH9QUK+vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz+Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl+LFt8dgUE9PT5x5aHBwcP+AgP+WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV+euTeJm1Ki7A73qNWtFiF+/gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM+fOqD6DDj1aZpITp0dtGCDhr+fVuCu3zlg49ijaokTZTo27uG7Gjn2P+hI8+PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN+EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA+JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx+yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav++Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV+wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg+kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS+0pCZbEhAAOw=="; 
 

 
class Canvas { 
 
     constructor() { 
 
      this.canvas = document.getElementById('canvas'); 
 
      this.context = this.canvas.getContext('2d'); 
 
      this.width = this.canvas.width; 
 
      this.height = this.canvas.height; 
 
      this.components = []; 
 
     } 
 
    
 
     draw() { 
 
      this.context.clearRect(0, 0, this.width, this.height); 
 
      this.context.globalCompositeOperation = 'hard-light'; 
 
    
 
      this.components.map(e => e.draw(this.context)); 
 
    
 
      window.requestAnimationFrame(this.draw.bind(this)); 
 
     } 
 
    
 
     add(e) { 
 
      this.components.push(e); 
 
    
 
      this.components.sort(function (a, b) { 
 
       return a.layer - b.layer; 
 
      }); 
 
     } 
 
    
 
     listeners() { 
 
      window.addEventListener('resize',() => { 
 
       this.width = this.canvas.width; 
 
       this.height = this.canvas.height; 
 
      }, false); 
 
     } 
 
    
 
     init() { 
 
      this.listeners(); 
 
      this.draw(); 
 
     } 
 
    } 
 
    
 
    class CanvasElement { 
 
     constructor(x, y, height, width, layer) { 
 
      this.position = { 
 
       x: x, 
 
       y: y 
 
      } 
 
      this.height = height; 
 
      this.width = width; 
 
      this.layer = layer; 
 
      this.color = "grey"; 
 
     } 
 
    
 
     draw(context) { 
 
      context.fillStyle = this.color; 
 
      context.fillRect(this.x, this.y, this.width, this.height); 
 
     } 
 
    } 
 
    
 
    class CanvasImage extends CanvasElement { 
 
     constructor(x, y, size, context) { 
 
      super(x, y, size.width, size.height, 0); 
 
      let self = this; 
 
      this.context = context; 
 
      this.image = new Image(); 
 
      this.image.onload = function() { 
 
       self.imageReadyToUse = true; 
 
       self.width = this.width; 
 
       self.height = this.height; 
 
       self.draw(); 
 
      } 
 
      this.image.src = imageURL; 
 
      this.imageReadyToUse = false; 
 
     } 
 
    
 
     draw() { 
 
      if (this.imageReadyToUse) { 
 
       console.log("YOU ARE UNDEFINED:", this.x, this.y); 
 
       this.context.drawImage(this.image, 0, 0, 61, 68); 
 
      } 
 
     } 
 
    } 
 

 
var canvas = new Canvas(); 
 
var canvasImage = new CanvasImage(0, 0, {width:61, height:68}, canvas.context); 
 
canvasImage.draw();

<canvas style="border:1px solid grey" id="canvas" width="400" height="400"></canvas> 
 
sdsdc

Answer 2

So fand ich heraus, was das Problem war. Anstatt this.x und this.y zu verwenden, musste ich this.position.x und this.position.y verwenden.

Vielen Dank für Ihre Hilfe!