Ankündigung

Einklappen
Keine Ankündigung bisher.

Angular: Key Events von Canvas empfangen. Wie?

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Angular: Key Events von Canvas empfangen. Wie?

    Ich habe eine Komponente:
    Code:
    @Component({
      selector: 'app-canvas',
      template: `<canvas #canvas width="600" height="300"></canvas>`,
      styles: ['./canvas.component.css']
    })
    export class CanvasComponent implements OnInit {
    
      @ViewChild('canvas', { static: true })
      canvas: ElementRef<HTMLCanvasElement>;            
      private ctx: CanvasRenderingContext2D;             
      private mouseCords : Point;                       
      private mouseDown : boolean = false;        
    
      constructor() { }
    
      ngOnInit() {
        this.ctx = this.canvas.nativeElement.getContext('2d');
        this.canvas.nativeElement.focus();             
    
        this.draw();
      }
    
      @HostListener('mouseup', ['$event'])
      onMouseup() {
        this.mouseDown = false;
        console.log(event);
      }
    
      @HostListener('mousemove', ['$event'])
      onMousemove(event: MouseEvent) {
         this.mouseCords = new Point( event.clientX, event.clientY );
    
         console.log(event);    
      }
    
      @HostListener('mousedown', ['$event'])
      onMousedown(event) {
        console.log(event);    
      }
    
      @HostListener('keydown', ['$event'])
      onKeyDown(event) {
        console.log(event);    
      }
    
      draw(): void {
      }
    }
    Wie kann ich Key-Events (KeyDown, KeyPress, KeyUp) von Canvas erhalten?

    in der ngInit funktion erhält die Canvas den Fokus, allerdings, so wie ich mir es gedacht hatte mit dem Empfang von Key-Events klappt nicht.




  • #2
    Das Canvas-Element hat keine Key-Events. Du müsstest wohl auf die Events vom window-Element hören.

    Kommentar

    Lädt...
    X