2014-02-25 6 views
5

Ich kodiere ein einfaches Spiel basierend auf HTML Canvas. Ich portiere nun von coffeeskript zu opal.Wie native Javascript-Methoden von Opal aufrufen?

Ich möchte das CanvasRenderingContext2D-Objekt auf effiziente Weise umbrechen.

Meine aktuelle Lösung ist ein Wrapper, aber ich würde wirklich gerne gebührenfrei überbrücken.

app.rb:

class Game 
    def initialize 
     @canvas = Element.find('#canvas').get(0) 
     js_ctx = `this.canvas.getContext('2d')`  # this is a javascript object 
     @ctx = CanvasRenderingContext2D.new(js_ctx) # create the proxy 
     @ctx.fillStyle='red' 
     @ctx.fillRect(10,10,50,50) 
    end 
end 

# the opal proxy class (named $CanvasRenderingContext2D in javascript space) 
class CanvasRenderingContext2D 
    # I currently model the proxy as a has_a while I'd prefer it to be is_a 
    attr_reader :js # the native javascript object 

    def initialize(js) 
     @js = js 
    end 

    # getter 
    def fillStyle 
     `this.js.fillStyle` 
    end 

    # setter 
    def fillStyle= value 
     `this.js.fillStyle= value` 
    end 

    # method invocation 
    def fillRect x,y,width,height 
     `this.js.fillRect(x,y,width,height)` 
    end 
end 

Für Hinweise sind willkommen.

+0

ein Grund, warum Sie die Antwort unten nicht akzeptiert haben? – iconoclast

Antwort

5

Das letzte Mal, als ich mit Opal arbeitete, folgte ich dem gleichen Pfad wie Sie, erstellte Wrapper und rief sogar direkt Javascript aus meinem Code an. Vor kurzem habe ich über mit Blog kommen, um die Verwendung der Mutter Klasse beschreiben, so dass Ihr Code würde wie folgt aussehen:

require 'native' 
class Game 
    def initialize 
    @canvas = Element.find('#canvas').get(0) 
    @ctx = Native(`this.canvas.getContext('2d')`) 
    @ctx.fillStyle='red' 
    @ctx.fillRect(10,10,50,50) 
    end 
end 

nicht wirklich diese Methode noch nicht getestet

[1] http://dev.mikamai.com/post/79398725537/using-native-javascript-objects-from-opal