六帖webアプリ
kickzone/TrainNavi2 · GitHub
線路のエディット機能を追加。実質、googleマップに合わせて線路の形を整えるための機能となった。1日で300行ちょいのコードを書いた。
上手くいかなかったことはたくさんある。まず、canvasにmousemoveのイベントをかましていると、要素のmousemoveのイベントが動作しない。駅オブジェクトをドラッグして位置を変更したいのに、クリックイベントは発生するものの、mousemoveが動作しないため何も起こらない。おそらくcanvasに吸い取られてしまっているのだろう。この場合、canvasのイベントは消し去っておく必要がある。

//stationというオブジェクトがcanvas上にあるとする
function OnStationMouseDown(evt){
var canvas = $("canvas")[0];
//canvasのイベントを捨てる
canvas.removeEventListener('mousemove', OnCanvasMouseMove, false);
canvas.removeEventListener('mouseup', OnCanvasMouseUp, false);
//新たにイベントを登録する
canvas.addEventListener('mousemove', OnStationMouseMove, false);
canvas.addEventListener('mouseup', OnStationMouseUp, false);
}
function OnStationMouseMove(evt){
//mousemoveイベントの処理
}
function OnStationMouseUp(evt){
//mousemoveイベントの処理
//イベントハンドラを元に戻す
canvas.removeEventListener('mousemove', OnStationMouseMove, false);
canvas.removeEventListener('mouseup', OnStationMouseUp, false);
canvas.addEventListener('mousemove', OnCanvasMouseMove, false);
canvas.addEventListener('mouseup', OnCanvasMouseUp, false);
}

さらに、JavaScript→PHPにPOSTを使って値を受け渡しするとき、配列の個数が1000を超えると、1000を超えたものから削除されていく、という恐ろしいPHPの仕様にぶつかった。
参考
この仕様を知らなかったので、大きなデータを保存したら一部が消えてしまってびっくらこいた。1時間くらいの作業が吹っ飛んだので非常にまいった。配列の受け渡しはやめて、半角スペースなどのセパレータをつけてPHPでpreg_splitを使って分解するように変更した。

Tweet