捕获 HTML5-canvas 上的点击

Question

我想在我的 HTML5-canvas.[=15 上获得 次点击 =]

我的对象:

mouse =
  position:
    x: 0
    y: 0
    set: (event) ->
      boundaries = canvas.getBoundingClientRect()
      this.position.x = event.clientX - boundaries.left
      this.position.y = event.clientY - boundaries.top

我的事件侦听器：

window.addEventListener 'click', (event) ->
  event.preventDefault()
  mouse.position.set event
  console.log "#{mouse.position.x} - #{mouse.position.y}"

错误信息:

TypeError: undefined is not an object (evaluating 'this.position.x = event.clientX - boundaries.left')

这段代码有什么问题？

Answer 1

所以，我有答案：

mouse =
  position:
    x: 0
    y: 0
    set: (event) ->
      boundaries = canvas.getBoundingClientRect()
      mouse.position.x = event.clientX - boundaries.left
      mouse.position.y = event.clientY - boundaries.top

您不应该使用 this 关键字。最好使用正确的对象名称：

鼠标.position.x
鼠标.position.y

和：

canvas.addEventListener 'click', (event) ->
  event.preventDefault()
  mouse.position.set event
  console.log "#{mouse.position.x} - #{mouse.position.y}"

是的，它有效。

捕获 HTML5-canvas 上的点击

Catching the clicks on an HTML5-canvas

html

coffeescript