代码之家  ›  专栏  ›  技术社区  ›  Nenoj

click eventlistner正在调用我的函数,但仅当我将它传递给匿名函数时

canvas javascript
  •  0
  • Nenoj  · 技术社区  · 6 年前

    我有一个click-eventListener调用静态方法“clearcanv”,但是 “clearcanv”中的一个方法未被调用

    这个.ctx.clearrect(x,y,this.canv.width,this.canv.width)

    正在调用“ClearCanv”,但未调用该方法。

    但是,如果我将click evenetlistner传递给一个匿名函数,并且突然从匿名函数内部调用静态方法“clearcanv”,它就会工作。

    有人能解释为什么会这样吗?

    问题出在JS的最后几行。 我在用火狐 

    class Board {
  static initalize() {
    // Create Canvas
    this.canv = document.createElement("canvas");
    this.ctx = this.canv.getContext("2d");

    this.canv.height = window.innerHeight;
    this.canv.width = window.innerWidth;
    document.body.appendChild(this.canv);

    this.prevX, this.prevY;
    this.lineWidth = 25;
    this.color = "white"; //Default color
    this.prevColor = this.color;
    this.erase = false;
    // Bindings
    this.draw = Board.draw.bind(this);
    this.clearCanv = Board.clearCanv.bind(this);
  }


  static draw({
    x,
    y
  }) {
    // Draw a cericle on X, Y
    this.ctx.beginPath();
    this.ctx.fillStyle = this.color;
    this.ctx.arc(x, y, this.lineWidth / 2, 0, Math.PI * 2);
    this.ctx.fill();
    this.ctx.closePath();

    // If we have prevX/Y draw a line from prevX/Y
    // To currentX/Y
    if (this.prevX && this.prevY) {
      this.ctx.beginPath();
      this.ctx.moveTo(this.prevX, this.prevY);
      this.ctx.strokeStyle = this.color;
      this.ctx.lineTo(x, y);
      this.ctx.lineWidth = this.lineWidth;
      this.ctx.stroke();
      this.ctx.closePath();
    }
    // Recored X/Y
    this.prevX = x;
    this.prevY = y;
  }
  static clearCanv(x = 0, y = 0) {
    this.ctx.clearRect(x, y, this.canv.width, this.canv.height);
  }
}

Board.initalize();

Board.canv.addEventListener("mousedown", function() {
  this.addEventListener("mousemove", Board.draw);
});

Board.canv.addEventListener("mouseup", function() {
  Board.prevX = null;
  Board.prevY = null;
  Board.canv.removeEventListener("mousemove", Board.draw);
});


const clearBtn = document.getElementById("clear");
//This does not work
clearBtn.addEventListener("click", Board.clearCanv);

// This works for some reson
//clearBtn.addEventListener("click", function(){
//  Board.clearCanv();
//});
    html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

canvas {
  height: 100%;
  width: 100%;
  background: black;
}

#clear {
  position: absolute;
  /* z-index: 222; */
}

#erase {
  position: absolute;
  left: 5.5rem;
}

.erase-selected {
  position: absolute;
  left: 5.5rem;
  opacity: 0.7;
}

#mouseColor {
  position: absolute;
  left: 11.2rem;
}

.font-size-select {
  position: absolute;
  left: 15.5rem;
}

.bg-color {
  position: absolute;
  left: 19.5rem;
}
    <button id="clear">Clear</button><button id="erase">erase</button><input type="color" id="mouseColor" />
<select class="font-size-select" id="select-size">
  <option selected value="10">10</option>
  <option value="15">15</option>
  <option value="20">20</option>
  <option value="25">25</option>
</select>
<select class="bg-color" id="select-bg">
  <option selected value="black">Dark</option>
  <option value="white">Light</option>
</select>
    1 回复  |  直到 6 年前
        1
  •  2
  •   Kaiido NickSlash    6 年前

    你在这里面临的问题是 x=0, y=0 你的帕拉斯 clearCanv 方法被事件侦听器传递的方法重写,即 x= Event .
    清除矩形() 悄悄地忽略了呼叫,因为 x 是 NaN 为了它所关心的。

    只要删除这里的参数就可以解决这个问题,因为我想你不希望它是除 0 . 

    class Board {
  static initalize() {
    // Create Canvas
    this.canv = document.createElement("canvas");
    this.ctx = this.canv.getContext("2d");

    this.canv.height = window.innerHeight;
    this.canv.width = window.innerWidth;
    document.body.appendChild(this.canv);

    this.prevX, this.prevY;
    this.lineWidth = 25;
    this.color = "white"; //Default color
    this.prevColor = this.color;
    this.erase = false;
    // Bindings
    this.draw = Board.draw.bind(this);
    this.clearCanv = Board.clearCanv.bind(this);
  }


  static draw({
    x,
    y
  }) {
    // Draw a cericle on X, Y
    this.ctx.beginPath();
    this.ctx.fillStyle = this.color;
    this.ctx.arc(x, y, this.lineWidth / 2, 0, Math.PI * 2);
    this.ctx.fill();
    this.ctx.closePath();

    // If we have prevX/Y draw a line from prevX/Y
    // To currentX/Y
    if (this.prevX && this.prevY) {
      this.ctx.beginPath();
      this.ctx.moveTo(this.prevX, this.prevY);
      this.ctx.strokeStyle = this.color;
      this.ctx.lineTo(x, y);
      this.ctx.lineWidth = this.lineWidth;
      this.ctx.stroke();
      this.ctx.closePath();
    }
    // Recored X/Y
    this.prevX = x;
    this.prevY = y;
  }
// here remove the params  
//  static clearCanv(x = 0, y = 0) {
  static clearCanv() {
    this.ctx.clearRect(0, 0, this.canv.width, this.canv.height);
  }
}

Board.initalize();

Board.canv.addEventListener("mousedown", function() {
  this.addEventListener("mousemove", Board.draw);
});

Board.canv.addEventListener("mouseup", function() {
  Board.prevX = null;
  Board.prevY = null;
  Board.canv.removeEventListener("mousemove", Board.draw);
});


const clearBtn = document.getElementById("clear");

clearBtn.addEventListener("click", Board.clearCanv);

// This worked because here the params were not overridden
//clearBtn.addEventListener("click", function(){
//  Board.clearCanv();
//});
    html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

canvas {
  height: 100%;
  width: 100%;
  background: black;
}

#clear {
  position: absolute;
  /* z-index: 222; */
}

#erase {
  position: absolute;
  left: 5.5rem;
}

.erase-selected {
  position: absolute;
  left: 5.5rem;
  opacity: 0.7;
}

#mouseColor {
  position: absolute;
  left: 11.2rem;
}

.font-size-select {
  position: absolute;
  left: 15.5rem;
}

.bg-color {
  position: absolute;
  left: 19.5rem;
}
    <button id="clear">Clear</button><button id="erase">erase</button><input type="color" id="mouseColor" />
<select class="font-size-select" id="select-size">
  <option selected value="10">10</option>
  <option value="15">15</option>
  <option value="20">20</option>
  <option value="25">25</option>
</select>
<select class="bg-color" id="select-bg">
  <option selected value="black">Dark</option>
  <option value="white">Light</option>
</select>

    现在,很难让你继续走这条路。你完全滥用了这里的语言。

    你在用这个 班 就好像它是一个实例。而是把这些都去掉 static 创造真实 班 然后再创建一个新的实例 班 . 

    class Board {
  constructor() {
    // Create Canvas
    this.canv = document.createElement("canvas");
    this.ctx = this.canv.getContext("2d");

    this.canv.height = window.innerHeight;
    this.canv.width = window.innerWidth;
    document.body.appendChild(this.canv);

    this.prevX, this.prevY;
    this.lineWidth = 25;
    this.color = "white"; //Default color
    this.prevColor = this.color;
    this.erase = false;
    // Bindings
    this.draw = this.draw.bind(this);
    this.clearCanv = this.clearCanv.bind(this);

  }


  draw({x,y}) {
    // Draw a circle on X, Y
    this.ctx.beginPath();
    this.ctx.fillStyle = this.color;
    this.ctx.arc(x, y, this.lineWidth / 2, 0, Math.PI * 2);
    this.ctx.fill();
    this.ctx.closePath();

    // If we have prevX/Y draw a line from prevX/Y
    // To currentX/Y
    if (this.prevX && this.prevY) {
      this.ctx.beginPath();
      this.ctx.moveTo(this.prevX, this.prevY);
      this.ctx.strokeStyle = this.color;
      this.ctx.lineTo(x, y);
      this.ctx.lineWidth = this.lineWidth;
      this.ctx.stroke();
      this.ctx.closePath();
    }
    // Recored X/Y
    this.prevX = x;
    this.prevY = y;
  }
  clearCanv() {
    this.ctx.clearRect(0, 0, this.canv.width, this.canv.height);
  }
}

// create an instance of Board
const board = new Board();

board.canv.addEventListener("mousedown", function() {
  this.addEventListener("mousemove", board.draw);
});

board.canv.addEventListener("mouseup", function() {
  board.prevX = null;
  board.prevY = null;
  board.canv.removeEventListener("mousemove", board.draw);
});


const clearBtn = document.getElementById("clear");

clearBtn.addEventListener("click", board.clearCanv);
    HTML
身体{
身高:100%;
宽度:100%;
填料:0;
保证金:0;
溢出:隐藏;
职位:相对;
}

画布{
身高:100%;
宽度:100%;
背景:黑色;
}

{清除}
位置:绝对;
/*Z-索引:222;。*/
}

擦除{
位置:绝对;
左:5.5雷姆;
}

。删除选定内容{
位置:绝对;
左:5.5雷姆;
不透明度:0.7;
}

第二个字
位置:绝对;
左:112ReM;
}

.字体大小选择{
位置:绝对;
左:155雷姆;
}

BG颜色{
位置:绝对;
左:19.5雷姆;
}
    <button id=“clear”>清除</button><button id=“erase”>清除</button><input type=“color”id=“mousecolor”/>
<select class=“font-size select”id=“select size”>
<option selected value=“10”>10</option>
<option value=“15”>15</option>
<option value=“20”>20</option>
<option value=“25”>25</option>
&选择/gt;
<select class=“bg color”id=“select bg”>
<option selected value=“black”>深色</option>
<option value=“white”>浅色</option>
&选择/gt;
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    5 月前
    Niobos  ·  如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?
    5 月前
    Alex  ·  在轻量级中同时解构和不解构变量
    5 月前
    Ângelo Rigo  ·  ReactJS映射:如何迭代[关闭]
    5 月前
    bairog  ·  从按属性筛选的对象数组字典中创建值数组
    5 月前
    KaiMcKiernan  ·  基于Math.random()的函数在另一个函数内不起作用[关闭]
    5 月前
    David Jeong  ·  浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?
    5 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    6 月前
    user3472810  ·  Angular@Output/EventEmitter返回undefined
    6 月前
    lokiuucx  ·  JS对象属性返回未定义,尽管对象属性应该有值
    6 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号