Рисунок на холсте с кофейной надписью - PullRequest
Новая
       18

Рисунок на холсте с кофейной надписью

1 голос
/ 29 июля 2011

У меня есть два файла

tools.coffee 

tools = {}

tools.pencil = =>
  @.started = false

  @.mousedown = (e) =>
    c.begin()
    c.moveTo(e._x, e._y)
    @.started = true

  @.mousemove = (e) =>
    if @.started
      c.lineTo(e._x, e._y)
      c.stroke()

  @.mouseup = (e) =>
    if @.started
      @.started = false

script.coffee 

find_position = (obj) ->
  curleft = 0
  curtop = 0
  curleft = $(obj).offset().left - $(window).scrollLeft()
  curtop = $(obj).offset().top - $(window).scrollTop();
  { x: curleft, y: curtop };

init = ->
  window.canvas = $('#drawn').get(0)
  c = canvas.getContext('2d')
  c.lineJoin = "round";
  c.lineCap = "round";
  c.strokeStyle = "#"+ghex;
  c.lineWidth = 1;
  tool = tools.pencil
  $('#container canvas').bind('mousedown mousemove mouseup', mouse_draw);

mouse_draw = (e) ->
  position = find_position(this)
  e._x = e.clientX - position.x;
  e._y = e.clientY - position.y;
  func = tool[e.type];
  console.log tools
  tools.pencil(e)

$(window).ready =>
  init()

Смысл кода заключается в рисовании элемента canvas, еслиты не можешь сказать.Я пытался заставить это работать в течение прошлых нескольких выходных и вперед, и я не продвинулся очень далеко.Вещи, которые я узнал, определены:

tools.pencil, но никаких методов карандаша не существует.Я не могу понять, почему это так.

Спасибо за помощь, я думаю, что это просто связано с областью видимости, встроенной в coffeescript.

1 Ответ

3 голосов
/ 29 июля 2011

Причина в этой строке: 

tools.pencil = =>
  ...

"Толстая стрелка" связывает функцию с текущим значением this.Это будет глобальная область.

Использование «тонкой стрелки» (->) не приведет к привязке функции, поэтому должно привести к ожидаемому результату.

Однако вы можете рассмотретькак-то так: 

class Pencil
  started: false
  mousedown: (e) -> ...
  ... etc

tools =
  pencil: new Pencil()
...