縦横縮尺率の変更、ドラッグによるスクロール・ホイールによる拡大縮小機能追加、画面上にないオブジェクトをcanvasに乗せないことで動作を軽量化、canvasのサイズ選択追加、京王線系統のDB追加

六帖webアプリ
kickzone/TrainNavi2 · GitHub
かなり進んだ。スクロールと拡大縮小、さらにオブジェクトの省略まで同時に実装できるとは思わなかった。次は、パッケージファイルの読み書きが一番大きな変更になりそうだ。
既知の不具合：スクロールすると線路が途切れることがある

1点ハマったこととして、firefoxはマウスホイールイベントが特殊で、mousewheelではなくDOMMouseScrollとかいうイベントを使わないといけないらしいです。クロスプラットフォームなコードは次の通り。

function OnCanvasMouseWheel(e){
	var toScale = scale;
	e.preventDefault();
	var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
	if (delta > 0){
		toScale /= 2;
	} else {
		toScale *= 2;
	}
	SetScale(toScale);
	return false;
}

canvas.addEventListener("mousewheel" , OnCanvasMouseWheel, false);
var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
$("canvas").on(mousewheelevent, OnCanvasMouseWheel);