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
ところで、スマホで試したら、最後までスクロールできないみたいです。また、スクロールも遅いです。早速、課題浮上かもしれません。続く。
コメント