OpalからRaphael.jsを使うためのライブラリを作りました

Opalから、2DグラフィックライブラリのRaphael.jsを呼び出すためのバインディングを書きました。
前から手元にはあったのですが、githubに置いてgemで入れられるようにしました。

OpalはJavaScriptで書かれたRuby処理系です。opal-raphaelを使うと、Ruby(にとても良く似た言語)を使って、ブラウザ上で絵を書いたり動かしたりできます。

できること

丸と四角が描けます。

example/app/application.rb

require 'opal'
require 'opal-raphael'

def onload(&block)
  `window.onload = block;`
end

onload do
  paper = Raphael(0, 0, 600, 600)

  background = paper.rect(0, 0, 600, 600)
  background.attr("fill", "#efefef")
  background.attr("stroke", "#efefef")

  circle = paper.circle(100, 100, 30)
  circle.attr("fill", "red")
  rect = paper.rect(200, 100, 50, 50)
  rect.attr("fill", "blue")
end

それ以上の機能はまだちゃんと動かなかったりしますが、とりあえず.attr()が動くのでひと通り遊べるかと(x, yを変えて位置を移動させるとか)。プルリク歓迎です。
あるいはIssuesやtwitterの@yharaにメソッドが欲しい、と言ってもらえれば対応できるかも知れません。

使い方

• Gemfileにgem 'opal-raphael'を追加
• Ruby側にrequire 'opal-raphael'を追加
• HTMLでraphael.jsをロード
• Opal上でrequire 'opal-raphael'

サンプル

リポジトリにサンプルが入っているので、とりあえずこれを動かしてみるのがおすすめです。

1. example/というディレクトリがあるので、これを丸ごとコピーする
2. Gemfileを少し修正

• before: gem 'opal-raphael', path: '../'
• after: gem 'opal-raphael'

1. bundle install
2. bundle exec rackup
3. http://localhost:9292/ を開く

これで上のスクリーンショットのような絵が出るはずです。
あとはapp/application.rbを書き換えてブラウザをリロードしてください。