Translate

2015年3月11日水曜日

JINS花粉カット眼鏡の重さ

花粉症には辛い季節になりました。
仕事柄、眠くなるタイプの薬は飲まないようにしているのですが、
目が痒いですね。とても痒い。プログラミングどころじゃないっての。
早く世の中にまさかりダイエットが流行って、一日一本ずつ杉の木を伐採する人がでてくるといいなと思います。
いつか来るその日のための繋ぎとして、花粉症対策眼鏡を買ってみました。
花粉をカットしてくれるかどうかは、よくわかりませんが・・・
これは重い!普段使っている眼鏡よりずっと重い!
そういえば、小学生くらいの時につけていた眼鏡はこれくらいの重さだったなぁ・・・と思いながら、
試しに重さを測ってみました。
両方とも、同じ度付きの眼鏡です。



普段使いの眼鏡(owndays)

JINS 花粉CUTパーフェクトフィットタイプ

大体、三倍くらい重さが違うんですねー。
花粉のカットももちろん大事なんですが、かけていて耳が痛くなるのは評価できませんなー

2015年3月1日日曜日

monaca内でのcanvas全画面処理と画像の表示方法

Monacaは一つのコードでandroidやappleのアプリを同時に作れるのがメリットですが、
端末によってディスプレイのサイズが違うのが難しいところです。
色々な端末があります・・・ 

tableタグなどでレイアウト調整すればいい場合もありますが、
今回苦戦したのがcanvasで大きな一枚絵を表示するケースです。
メインのマップを表示する際、後で色々なエフェクトを足したかったので
canvasを使う方法を選んだのですが、

まず、canvasを全画面にするのに一苦労。
こちらのページを参考にしました。

    var main = document.getElementById("main");
    mainhtml='<div id="wrapper" style="    width: 100%; height: 100%; position: fixed;">';    
    mainhtml+='<canvas id= "world" onclick="coordinate()"></canvas>';      
    mainhtml+='</div>';  
    main.innerHTML =mainhtml;


$(function () {
    sizing();
$(window).resize(function() {
sizing();
});
});

function sizing(){
$("#world").attr({height:$("#wrapper").height()});
$("#world").attr({width:$("#wrapper").width()});
}

これで、画面いっぱいに表示されました。


全画面表示成功

ところが、ipadのような端末のシミュレーターだと、縦横比が異なるため、
mapの見え方が変わってきてしまいます。

間延びした格好に 
というわけで、画像の縦横比とcanvasの縦横比を比べて、
画像のほうが横長のときはcanvas内で縮めて表示するようにしました。
(画像の表示については、他の記事を見てください。)

    if(img.width/canvaswidth> img.height/canvasheight)//横長の比率がcanvasのほうがきついとき
    {
縦を少し縮めて表示
        ctx.drawImage(img,0,0,img.width , img.height*(img.width/canvaswidth)/(img.height/canvasheight),0,0, canvaswidth, canvasheight);
 
    }
    else
    {
//通常通り表示
        ctx.drawImage(img,0,0,img.width , img.height,0,0, canvaswidth, canvasheight);
    }




うまくいきました。下の開いたスペースには、後で飾りを入れてごまかしましょう。