読者です 読者をやめる 読者になる 読者になる

ナチュラル @rch850

ナチュラル丼発祥の地、福井からお届けします。技術的な話題とか、雑談とか。

KineticJS から EaselJS にした

Canvas 使ってごちゃごちゃと描くためにこの間まで KineticJS 使ってたんだけど、ちょっとつまづいた。スマホ向けの canvas だったんだけど、大きな canvas、というか、KineticJS 的には Stage を作ると、canvas をスワイプしてもスクロールしてくれない。素の canvas で試してみたら普通にスクロールする。これは困った。たぶん Stage の draggable 絡みの挙動なんだろうなぁ。

で、こりゃだめだということで EaselJS にチャレンジ。そしたらこっちはちゃんとスクロールしてくれた。それだけじゃなく、KineticJS では無理(面倒?)だった角丸長方形も描画できた。よかった。

概念にそんなに大きな違いはないけれど、違いとして気をつけたい点をいくつか。

  • KineticJS では Stage -> Layer -> Group -> 各種 Shape だったのが、EaselJS では Stage -> Container -> 各種 Shape
  • KineticJS ではステージとして div とかを指定していたところ、EaselJS では canvas を指定
  • EaselJS では stage.update() を呼び出して描画する