KineticJSを使ってHTML5 Full Canvasのアプリを作る: 「単純スクロール」編

  • 投稿日:
  • by

HTML5 Canvasのみを使ってどこまでスマホアプリが作れるのか挑戦中です。 題材はRSSリーダーです。RSS Pipesの補完機能として考えています。

前回に続き、スクロールを実装しました。

その前に、テキストの配置について補足します。前回は、setOffsetを使いました。ちょっと分かりにくかったので、ループの中でy座標をインクリメントするように変更し、背景の高さもあわせて大きくするようにしました。詳しくはコードを参照してください。

さて、本題のスクロール処理についてです。スマホを想定しているので、スクロールバーではなく、タッチ(ドラッグ)スクロールです。はじめは、touchstart/mousedownイベントを使って自力でスクロール処理を書いてみましたが、スクロールするたびにdraw()で再描画をしたところ、とても遅くなってしまいました。

そこで、KineticJSが用意しているDrag&Dropの仕組みを使う方法に変更しました。この方がすっきり書けました。どこまで細かい制御ができるかはこれからのお楽しみです。

コードはこんな感じです。

var layer = new Kinetic.Layer({
  draggable: true,
  dragBoundFunc: function(pos) {
    var newY = pos.y;
    if (newY > 50) {
      newY = 50;
    }
    var minY = -50 - rect.getHeight() + stage.getHeight();
    if (newY < minY) {
      newY = minY;
    }
    return {
      x: this.getAbsolutePosition().x,
      y: newY
    };
  }
});

想像していたより、スクロールがスムーズではありません。Canvasを直接操作した場合と比較していませんが、KineticJSのオーバーヘッドがそれなりにあるのでしょうか。

実行結果はスクリーンショットでは見せられないので、 下記からどうぞ。ただし、数日間以内には新しいバージョンになってしまいます。

http://canvas-rss-reader.herokuapp.com/

全コードはこちらです。

https://github.com/dai-shi/canvas-rss-reader/tree/3d370b3386b7f46116b892ac4cf37d5282d3910a

ところで、スマホで試したら、最後までスクロールできないみたいです。また、スクロールも遅いです。早速、課題浮上かもしれません。続く。