2012-03-30 77 views
0

我想在画布上绘制图像,然后对图像进行动画处理,而非像精灵一样。我无法使用Coffeescript显示图像。我已经缩短了我的班级的这一张贴;希望我没有引入错误。Canvas drawImage with Coffeescript

class TripleSlider 
    @imageMin = new Image() 

    constructor: (@context, @x, @y, @tsLabel, @showLimits=false) -> 

    $(TripleSlider.imageMin).onload = -> 
    @context.drawImage(TripleSlider.imageMin, @x+50, @y+50) 

    TripleSlider.imageMin.src = "/images/sliderTipMin.png" 

我也试着写onload处理是这样的:

TripleSlider.imageMin.onload = -> 
    @context.drawImage(TripleSlider.imageMin, @x+50, @y+50) 
  1. 我怀疑onload处理语法是有点不正确。我发现的大多数例子都比要求的复杂得多,而且Coffescript文档给我们留下了很多想象空间。
  2. 我该如何改变图像的位置?

迈克

回答

1

@,或this,是不是你的onload处理程序中你TripleSlider实例,因此@context可能不会被定义。这是因为javascript范围如何this。 CoffeeScript中提供了 “fat arrow”,=>,正是这种:

$(TripleSlider.imageMin).onload = => 
    @context.drawImage(TripleSlider.imageMin, @x+50, @y+50) 
+0

我试过,但没有喜悦。可能还有另一个问题。这也不起作用:$(TripleSlider.imageDef).load(event)=> @ context.drawImage(TripleSlider.imageDef,@ x + 63,@sliderTrackBottom()) – 2012-03-30 17:23:47