2012-03-30 82 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