2013年07月08日

円周座標の計算

中心座標(x,y)から半径10の円周座標を30度刻みで求める

// 同心円状に球を飛ばす
function act1(x, y) {
for (deg = 0; deg < 360; deg += 30) {
var rad = deg * (Math.PI / 180);
x0 = 10 * Math.cos(rad);
y0 = 10 * Math.sin(rad);

objs.unshift(new circle(x, y, x0, y0));
}
};

角度をラジアンに変更してsin/cosで求めます。
上の例では球を同心円状に飛ばす加速度として使用。
動作デモはこちら

http://www.62o.net/touch/touch.html


タグ:JavaScript
posted by ろく at 11:45| Comment(0) | 日記

タッチにより表示/非表示を切り替える方法

まずPC(マウスがある端末)用にhoverすると表示される要素を作ります。



これをandroid端末のブラウザ(chrome)で操作すると、タッチするとhover(大きくなる)され要素外を再度タッチすると元に戻ります(小さくなる)。
しかしios端末(safari)ではhoverされません(バグなのか仕様なのかは不明)

そこで、javascriptでtouchstartイベントをフックし、style.heightをいじって表示/非表示させます。

var min = document.defaultView.getComputedStyle(document.getElementById('footer'), '').height === "30px";
document.getElementById('footer').style.height = min ? height_max : "30px";

しかし、このままだと表示させた要素の中にあるボタンやテキスト入力欄にタッチしても表示/非表示されてしまします。

そこで入力領域がタッチされた場合は、表示/非表示されないようにします。


// footerにタッチしたら表示/非表示
var flg = false;
var height_max = "400px";
document.getElementById('footer').ontouchstart = function(e) {
if( flg ) {
flg = false;
return true;
}
var min = document.defaultView.getComputedStyle(document.getElementById('footer'), '').height === "30px";
document.getElementById('footer').style.height = min ? height_max : "30px";
return false;
};
// コンテンツ領域は表示/非表示させない
document.getElementById('footerContents').ontouchstart = function(e) { flg = true; return true; };


document.getElementById('footer').ontouchstartでfalseを返すのは既定の処理(android:chormeでhoverする処理)を無効化したい為です。



posted by ろく at 11:03| Comment(0) | 日記