簡體   English   中英

用角度6中的畫布調整窗口大小后,單擊偵聽器不正確的數據

[英]Click listener incorrect data after resizing window with canvas in angular 6

我正在使用帶有通過for循環添加的clickable元素的畫布,添加了一個調整大小的事件,該事件在調整用戶窗口的大小后重新繪制畫布,當窗口第一次加載畫布且單擊偵聽器工作良好時,我的問題開始了在調整窗口大小之后,我得到錯誤的單擊坐標和不良行為,在屏幕調整大小的所有時間中,單擊事件看起來都存在積壓

這是關於stackblitz的完整代碼

調整大小功能

   @HostListener('window:resize', ['$event'])
    onResize(event) {
      this.innerWidth = window.innerWidth;
      this.innerHeight = window.innerHeight;
      this.canvas.width = this.innerWidth;
      this.canvas.height = this.innerHeight 
      this.cleardraw()
      this.draw()         
    }

      cleardraw(){
    var ctx = this.canvas.getContext('2d');
    ctx.clearRect(0, 0, this.innerWidth, this.innerHeight);

   }

繪圖功能

draw() {

  var ctx = this.canvas.getContext('2d');
  ctx.font = "15px Arial";
  var seats = []                               
  var tempOrderArrey = []                        
  var orderSeatsClinet = []                        
  var selectedSeatsClient = []                      
  var numberOfSeats = 10
  var numberOfRows = 10
  var canvasWidth = this.innerWidth
  var canvasHight = this.innerHeight


  function Seat(x, y, w, h, id, line, seatNum, color) {
      this.x = x - 160
      this.y = y ;
      this.w = w;
      this.h = h;
      this.id = id;
      this.line = line
      this.seatNo = seatNum + 1 ;
      this.color = color
  }


  Seat.prototype.draw = function () {
      ctx.fillStyle = this.color
      ctx.fillRect(this.x, this.y, this.w, this.h)


  }



  function drawAll() {
      for (var i = 0; i < seats.length; i++) {
          seats[i].draw();
      }
  }

    var id = 1;
    var xPad = canvasWidth / 30


    function addSeats(value, ch) {
        for (let i = 0; i <= 15; i++)
            seats.push(new Seat( (canvasWidth / 3) + (i * xPad), value, canvasWidth/ 37, canvasWidth/ 37, id++, ch, i, "#998515"));
    }

    var start = 60, diff = canvasWidth/30, ch = 0;
    for (let i = 0; i < 2; i++) {
        //60 + (40 * i)
        addSeats(start + (diff * i), ch++);
    }     

  drawAll()

點擊事件功能

 this.renderer.listen(this.canvasRef.nativeElement, 'click', (event) => {
    let cX = event.layerX;
    let cY = event.layerY;

    const offsetLeft = this.canvasRef.nativeElement.offsetLeft;
    const offsetTop = this.canvasRef.nativeElement.offsetTop;

    this.cX = cX - offsetLeft;
    this.cY = cY - offsetTop;

      for (var i = 0; i < seats.length; i++) {
          var s = seats[i];
          if (cX >= s.x && cX < s.x + s.w && cY >= s.y && cY < s.y + s.h) {
              if (s.color == '#998515') {      // If green
                  tempOrderArrey.push({ "id": s.id, "seatNum": s.seatNo, "rowNum": s.line })
                  s.color = '#ff0000'
                  ctx.fillStyle = '#ff0000'
                  ctx.fillRect(s.x, s.y, s.w, s.h)

              }
              else if (s.color == '#ff0000') {  // If red
                  tempOrderArrey = tempOrderArrey.filter(seat => seat.id != s.id);
                  ctx.fillStyle = '#998515'
                  s.color = '#998515'
                  ctx.fillRect(s.x, s.y, s.w, s.h)                                   
              }

          }
          this.tempOrderArrey =   tempOrderArrey
      }})



}

原因是每次您調整大小時,都會再次調用renderer.listen ,因此,一鍵單擊就會觸發許多事件。

您需要確保在創建新監聽器之前先清除監聽器

// Check if the reference exists
if (this.reference != null) {
    this.reference; // Clear the listener
}

// Store a reference to the listener
this.reference = this.renderer.listen(this.canvasRef.nativeElement, 'click', (event) => {

這是StackBlitz的叉子

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM