月別: 2013年1月

マウスでCanvas描画

マウスでCanvas描画
まず、マウスポインタがCanvasにあるか判別
これには
mousemoveイベントを使う
Canvasにないなら、そこで終了
canvasObj.addEventListener(“mousemove”,fuction(evt){
さらに、判定
今度はマウスボタンを押しているか
判定
もし、判定して押してないなら
その後の処理は不要だから終了
if(!canvasObj.drawFlag){
return;
}
ここまで、判定を通ってきたら
マウスの座標を調べる
var x=evt.offsetX||evt.layerX;
var y=evt.offsetY||evt.layerY;
そして、座標を線で結んでいく
結ぶには
前回の座標と、今の座標を直線で描画すればok
strokeStyleで色を設定
lineWidthで線の幅
lineCapで roundを指定すると線の端が丸くなるのでこれを指定
beginPathでパスを生成し
moveTo()とlineTo()で座標を指定
ちなみにパラメータは
moveTo(前のX座標, 前のＹ座標)
lineTo(今のX座標, 今のY座標)
となる
そして、後は
stroke()で実際線を描く
strokeを書かないと、場所を指定しただけなので注意

マウスボタンのアップダウン処理

描画のときの処理
実際に、canvasに描画するには
canvasObj.addEventListener(“mousemove”,fuction(evt){
if(!canvasObj.drawFlag){
return;
}
var x=evt.offsetX||evt.layerX;
var y=evt.offsetY||evt.layerY;
context.strokeStyle=”rgba(255,255,255,1)”;
context.lineWidth=10;
context.lineCap=”round”;
context.beginPath();
context.moveTo(canvasObj.oldX,canvasObj.oldY);
context.lineTo(x,y);
context.stroke;
context.closePath();
canvasObj.oldX=x;
canvasObj.oldY=y;
},false);
では、恒例の解説へ
まず、マウスポインタがcanvasにあるかを判定する
これは、mousemoveイベントを使う
canvasObj.addEventListener(“mousemove”,fuction(evt){
マウスボタンが押されたら
押されたら場所のx,y座標を求め
Canvasオブジェクトの
oldXoldY
へ代入
このときに、格納する
oldX
oldY
は自作の変数
あと、マウスの座標はEventオブジェクトに入っているので
offsetX
offsetY
を読み出せば、x,y座標を取得できる
ただし、firefoxの場合は別で
layerX
layerY
に格納されている　
このため
||を使って、どちらでも対処可能にする
||は論理演算子のOR
ここをソースにすると
canvasObj.oldX=evt.offsetX||evt.layerX;
canvasObj.oldY=evt.offsetY||evt.layerY;
続いて、マウスのボタンを押している状態か、それとも押していない状態か判別するため
フラグを作る
押した、押さないだけなら
clickイベントでいいけと
押したままというイベントはないので
これはフラグで対応する
ということで、
mousedownイベントなら
マウスを押した状態なので
このときに
drawFlag=true
にする
逆に、マウスを離したときには
mouseupイベントのときに
drawFlag=false;
とすれば
判別することができる
とりあえず、ここまでが
描画するときに必要なマウスの部分の処理

動作確認データ組み込み

周辺ランドマーク情報をアプリ中で作成
して表示
今回も参考書籍はおなじ

このときに
エンティティクラスを作成すると情報作成
管理が便利になる
エンティティークラスは
データーベースに関連付けるクラス
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1478444084
位置情報クラスを作成する
この
ソースは
ダウンロード/sample.zip
の中にある
Android サンプルソース.zip の中にある
ソースはそれを見るとして
見るべきソースのファイル名は
PointInfo.java
作り方は
パッケージ名を右クリック>
new > class でName でファイル名を
PointInfo
とする
拡張子はいらない
できたら
import android.location.Location;
をインポート
基本的にはあとは書籍
どおりにコードを書けばOK
今回作成したクラスはエンティティクラス
生成されたオブジェクトはコンストラクタや
setter
getter
などで変数へアクセスできる
このカプセル化したデータを使ってデータを作成する
カプセル化するデータは
その地点の位置情報
地点の名称
現在地からの距離
となっている
変数と値の関係は
mLocation 位置情報
mTitle 名称
mDistance 現在地からの距離
ここまでできたら
今度は組み込みデータの作成
ソースは
プロジェクトを作成するときに
作成したMainAcitivity へ追記する
サンプルだと
MapPreviewActivity.java
になる
ubuntu なら
gedit でソースファイルを開いて
Alt +s で検索して
ArrayList

Android 2.3.3 google mapアプリのメモ

まずAndroidManifest.xml 編集
<uses-library
android:name=”com.google.android.maps”
android:required=”true”/>
を追記
場所は
</application>
の上
android:name
は追加するライブラリ
android:required=”true”
端末にライブラリがあるかチェックする
uses-libraryタグ
は
アプリをダウンロードする端末が提供可能ライブラリを宣言
端末にライブラリがないと正しく動作しない
続いてパーミッション設定
必要なのは
android.permission.ACCESS_MOCK_LOCATION
擬似位置情報の使用
android.permission.ACCESS_FINE_LOCATION
位置情報を使用
android.permission.INTERNET
インターネット接続
次にUI作成
これはres/layout/の中で行う
まず、最初に
仕様
必要なのは
現在地の遷移
周辺ランドマーク表示
地図の衛生写真表示切り替え機能
これらはボタンにする
地図が表示され、その上にボタンが並んでいる
というもの
親になるView には
RelativeLayout
をつかう
RelativeLayout
の子ビューは親ビューや子ビューの位置から
設定できる
このときに、位置を具体的に設定しないと
ボタンが３つ重なってしまう
今回はMap に重ねて表示したいから
MapVIew にボタンを重ねる
あと、MapView はjava で制御するから
id をふっておく
これは、html5 と java script のときと同じ
ボタンの文字は
string.xml で設定
あと、見栄えを
よくしたいから
ボタンを揃えた
これは
ボタンの親View にLinearLayout を設定するとできる
仕組みとしては
最初に
RelativeLayout
次に
LinearLayout
その上にボタン
LinearLayout の子View には
android:layout_weight
の設定ができる
これは親レイアウトの余白を自動で埋める設定
配分は
子Viewで余白を設定した比率になる
この仕組みを使うと
ボタンの文字の長さを均一にできる
これには
layout_width を 0 にしておくこと
通常は
文字の大きさ似合わせたり
幅を指定するから意外だけど
今回のやりかたなら
layout_width=0
なら
自動的にサイズ補正してくれるというもの
あと、Android でボタンの設定には
android:onClick
を使う
このパラメータに文字列を指定することで
ボタンがタップされたとき
そのActivity の同じ名前のメソッドが呼び出される
ボタンにはわかりやすい名前をつけておくと
あとあと楽
ボタンに名前をつけるのは
web 関連をやったことがあるなら
button id=”名前”
と同じかんかく

google map API の API key の確認

Androidアプリ位置情報プログラミング
を参考に、位置情報アプリを作っていこうと思います
以前 API key は取得しているので
今回は確認してみました
書籍ではURLが掲載されていますが
そのURLを打ち込むと
https://developers.google.com/maps/documentation/android/
へアクセスします
ここで
Getting Started
をおすと
Obtaining an API Key
というところがあります
意味は
APIキーの取得
ここに API key が書かれていました

Androidアプリのアイコン設定の項目

Androidアプリのアイコン設定の項目
アイコン設定が英語なので
解説
Foreground
作成する画像のタイプを選択
Trim Surrounding Blank Space
チェックを入れるとスペースのトリミングをする
Additional Padding
画像の余白設定
Foreground Scaling
Foregroundの画像のクロップ設定
Shape
アイコンの形
Background Color
背景色
Foreground Color
Foregroundの画像の色
Foregroundの設定項目は
Image
パソコンの中から画像を選択
Clipart
用意されている画像から選ぶ
chooseを押すと候補がでてくる
Text
文字を書く
よう書籍アプリとかであるタイプ
Arial Boldで、さらに細かい設定ができる
続いて、Foreground Scalingの項目
Crop
はみ出た部分のクロップを行う
Center
アイコンの中心に表示
Shapeでの設定
None
背景画像を指定しない
Square
正方形の背景にする
Circle
円形のアイコンにする

マウスで描画する仕組み

マウスで描画する仕組み
マウスで描画する仕組みのメモ
Canvasでクリックされたら
マウスの座標を
oldX
oldY
へ保存
マウスボタンの押した、押さないの識別のため、
フラグをつくり
このフラグはdrawFlagへ保存
で
drawFlag=trueなら、Canvasへ描画
drawFlag=falseなら、描画しない
これが、最初の処理
次は、描くときの処理
drawFlagがtrueなら
oldX
oldY
から、現在のマウスの座標まで
直線を描画
あとは、マウスを離したときの処理
マウスを離すと
drawFlag=false;
になるので、描画をやめる

マウスで描くための準備

マウスで描くための準備
マウスの動きはmousemoveイベントで補足
次に
マウスボタンの押されている状態は
mousemoveイベント内で調べるか
マウスボタンを押したときに発生するmousedownイベントを利用して調べる
mousedownイベントの場合は
イベントハンドラ内でマウスイベントの状態を変数なとに記憶しておいて
mousemoveイベントから呼び出される
イベントハンドラ内で参照する
マウスボタンの状態以外で
保存しておくのがあり、それが
線を引き始めたときのマウスの座標
マウスで文字を書くなら
座標を点にして、これらを線で結ぶようになる
このため、始点になる古い座標、つたり前の座標も必要
これらの情報は
Canvasオブジェクトにプロパティを追加し
そこに保存する
プロパティにすれば、識別できるから
あとは、これでコントロールできる