月別: 2013年1月

世界測地系と日本測地系
日本周辺の位置情報に特化した独自の位置情報の計算が
日本測地系といわれる
GoogleMapで使われているのは
世界共通の位置情報の計算方法で
世界測地系といわれる
現在、ほとんどのアプリは、世界測地系
なぜなら
日本測地系と、世界測地系では
位置情報に400mの誤差があるから
世界測地系と、日本測地系の変換は　
国土地理院
海上保安庁情報部
のWebサイトでできるが
現在地情報を取得するほとんどのAPIは
日本測地系と世界測地系の両方に対応している

ドロップ領域のイベント処理
ドラッグ項目がドロップ領域に入ると
dragenterイベントが発生
このイベントが発生したら、ドロップ領域の背景を変更
drop.addEventListener(“dragenter”,fuction(evt){
evt.preventDefault();
drop.style.backgroundColor=””#ecc;
},true);
drop.addEventListener(“dragleave”,fuction(evt){
evt.preventDefault();
drop.style.backgroundColor=”#eee”;
},true);
drop.addEventListener(“dragover”,fuction(evt){
evt.preventDefault();
},true);
dragenterイベントでも
preventDefault()
でブラウザーのデフォルト動作を無効化しておく
ドラッグ項目がドロップ領域からでたら
dragleaveイベントが発生する
このイベントが発生したら
ドロップ領域の背景色を元に戻す
そして、一番重要なのが
dragoverイベント
これがないと
ドラッグ&ドロップできない
中身は
ブラウザーのデフォルト動作を無効化する
preventDefault();
だけでok
処理をまとめてみると
ドラッグ&ドロップは
drop.addEventListener(“dragenter”,fuction(evt){
evt.preventDefault();
//ドロップ領域に入ったときの処理
},true);
drop.addEventListener(“dragleave”,fuction(evt){
evt.preventDefault();
//ドロップ領域からでたときの処理
},true);
//ドラッグ&ドロップの必須
drop.addEventListener(“dragover”,fuction(evt){
evt.preventDefault();
},true);

まず
document.querySelectorAll()
で、ドラッグするdiv要素をピックアップする
ちなみに、#dragitems divは
id=”dragitems” の中のdiv要素という意味
これを変数 itemListへいれれば
ドラッグ対象となるdiv要素が配列要素として入る
ソースにすると
var itemList = document.querySelectorAll(“#dragitems div”);
次にドラッグ対象のdiv要素の
draggableプロパティへtrueを設定
これで、ドラッグ可能になる
ソースにすると
itemList[i].draggable=true;
単純にドラッグするだけならこれだけで
いいけど
普通はどこかにドロップする
このとき、必要なのがドロップ先で
なにがドロップされたか、
わかるようにすること
今回はドラッグ対象のdiv要素へIDをつけている
ドラッグが開始されると
div要素では
dragstartイベント
が発生する
このdragstartイベントを捕捉し、
ドロップ先に渡すデータを設定
ソースにすると
itemList[i].addEventListener(“dragstart”,fuction(evt){
ドロップ先にdivのIDを渡すには
Eventオブジェクトを介して
データのやりとりをする
Eventオブジェクトには
データのやりとりをするための
dataTransferオブジェクトがあるので
これを使う
dataTransferオブジェクトの
setData()
で、データをドロップ先へ渡せる
setData()は
最初のパラメータに
データの種類を示す文字を指定する
指定する文字は、すでに決まっていて
自分で任意のものを選ぶことは残念ながらできない
文字なら text
URLなら url
となる
ただし、ブラウザーによっては
text
しか使えないから
無難にいくならtextを指定するほうがよい
div要素のIDとかならtextになる
そして、ドロップ先に渡すデータは
setData()の
2番目のパラメータに指定する
dragstartイベントが発生したとき
ドラッグ開始された要素の情報が
Eventオブジェクトの
currentTargetオブジェクトに入る
この
currentTargetオブジェクトの
idプロパティへ
div要素のIDが入っているので
これをsetData()の
2番目のパラメータとして指定すれば
要素のIDを渡せる
ソースにすると
evt.dataTransfer.setData(“text”,evt.currentTarget.id);
draggable=trueは
ドラッグ可能にするだけで
ドロップするときの処理などは
Javascriptで書く必要があるので注意

HTML5のドロップ&ドラッグは
デスクトップからのファイルもドロップできる
また、File APIと組み合わせて
デスクトップからドロップしたファイルの内容を読み込んで処理できる
たとえば
デスクトップの画像を
Canvasへ
ドラッグ&ドロップし
Canvasへ画像を描画するなと

Canvas関連まとめ
Canvasは2Dも3Dも描画できる
ただし、2D描画は2Dコンテキストを取得しないとダメ
塗り関連はfillStyle
線関連はstrokeStyleで
設定する
座標点の移動は
moveTo()
でする
直線を描くには
lineTo()
四角形を描画するには
fillRect()
rect()
clearRect()
strokeRect()
を使う
曲線を描くときには
二次ペジェ曲線ならquadraticCurveTo()
三次ペジェ曲線なら
bezierCurveTo()
を使う
複雑な図形、多角形などを描くには
複数のパスを組み合わせる
パスは
beginPath()で新規にパスを作成できる
パスを閉じるには
closePath()を使う
クリッピングするには、パスを作成したあとclip()を使う
画像と映像の描画は
drawImage()を使う
影は
shadowColor
shadowBlur
shadowOffsetX
shadowOffsetY
で設定する
文字の描画は
fillText()
strokeText()
を使う
文字サイズや書体は、fontに設定
文字の行揃えは textAlignで設定
不透明度は
globalAlphaで設定
線幅は lineWidth
線端の形状は lineCapで設定
ピクセルデータを読み出すには
getImageData()
ピクセルデータを描画するには
putImageData()

変数へピクセルデータ保存
Canvasのピクセルデータを読み出すには
getImageData()
を使う
getImageData()は、読み出したいピクセルの範囲をパラメータで指定する
getImageData()の書式は
getImageData(X座標, Y座標, 横幅, 縦幅)
もし、Canvas内のすべてのデータを読み出すなら
getImageData(0,0,canvasObj.width,canvasObj.height)
getImageData()は
ピクセルデータを含むオブジェクトを返す
ピクセルデータを利用したいときには
返されたオブジェクトの
data配列へアクセスする
お絵かきアプリとかで
取り消し処理したいときには
このピクセルデータをCanvasへコピーしている

ローカルストレージと取り消し機能
取り消し機能には
過去に遡り取り消しできるタイプ
一度だけの取り消し機能タイプがある
ブラウザーで
何回も取り消し可能にすると
その分メモリを消費する
このため、多くのアプリでは
取り消し可能に制限かついている
ちなみに、今回はお絵かきアプリのように
一回だけ取り消しするのが
前提にしてみた
取り消し機能を実際するには
Canvasの内容をどこかに保存しないとダメ
まず、Canvasの内容を保存するには
Canvas内にあるすべてのピクセルデータを
変数へ保存する方法があり
これは、何度も取り消しができるようにするときに使う
もう一つの方法としては
取り消し用に見えないCanvasを用意して
そこにピクセルデータをコピーする方法
CanvasのdrawImage()は
最初のパラメータに
Canvasオブジェクトを指定すると
Canvasの内容をコピーして描画できる
これは、取り消し回数が1回の時のみ使える方法
ローカルストレージへピクセルデータを保存することもできるけど
ローカルストレージには要領制限があるし
ほかのデータが入っているときに
要領制限の問題で
確実に保存できるか、わからないため
この方法は微妙

SVG
SVGは
scalable
vector
graphics
の略
SVGはHTML5の関連技術なので
HTML5の仕様には含まれない
canvasでもSVGでも
イラストや図形が描ける
canvasとSVGの違いを紹介
まず、canvas
こちらはピクセルの集まりで
グラフィックを表現
次にSVG
こちらは座標点の集まりで
グラフィックを表現
このため、毎回描画するときに計算するので
canvasより遅い
あと
canvasは
ピクセルごとにエフェクト処理できるけと
SVGでは
ピクセル単位のエフェクト処理はできない
まるでメリットなしみたいだけど
SVGにもメリットがあり
少ないデータでどのようなサイズでも
グラフィック描画ができるという利点がある
これは、canvasだと
画像を縮小したら画像が潰れたり
拡大したら、ピクセルが大きくなり
輪郭がブロックみたいなかんじになる
よくあるパソコンとかで、
ドット絵を拡大したような状態になるものを
描画したいときに
SVGなら
毎回サイズにあわせて計算するから
ベストな状態になるというのが
利点
あと、Canvasは描画するときに
Javascriptの制御が必要だけど
SVGは
XMLベースなので
HTML内に
svg要素を書いて図形を描画できる

文字の描画
文字の描画はマウスボタンがクリックされたときの
イベントを捕捉してから行う
あと、文字を描画するときには
一旦canvas全体を黒く塗りつぶしてから
行う
これは
すでにある文字の上に重なって表示されると
わかりにくいから
この処理のソースは
context.fillStyle=”black”;
context.fillRect(canvasObj.width,canvasObj.height);
となる
表示する文字は
テキストフィールドへ入力した文字なので
読み出して変数へ格納
ソースにすると
var text = document.getElementById(“char”).value;
あとは、fillText()で読み出した文字を描く
fillText()のパラメータは
書きたい文字
横幅
縦幅
これが
textに格納している文字
canvasObj.width /2
320
となる
canvasObj.width/2は
画面の大きさの半分