ようやくWinCE(開発用エミュレータ上)で動いた。一番苦労したのはCPU依存が激しかった画像まわり。次にUNICODEとMBCSとの共存。次にAPIやCランタイムライブラリの差異(GetGlyphOutlineが無いのでExtTextOut、std::abs(float)が無いのでstd::fabsf、等)。
問題点。
クエン酸粉末を入れて保温選択ボタンと再沸騰ボタンを同時押し三秒。
このところ雨が多いですね。明日は晴れると良いなぁ。
とある大きめのプロジェクトで、開いているドキュメントを閉じるのが大変遅くて困っている。プロジェクト内のソースコードでも、新規で作成したテキストファイルでも、Ctrl+F4や×ボタンを押してから消えるまでに7秒くらいかかる。沢山ファイルを開いた状態で「すべてのドキュメントを閉じる」や「終了」を選んだときなどは、もう我慢できないくらい待たされる。仕方ないので終了するときはすべて保存してからプロセスを強制終了させることにした。
ソリューションエクスプローラ内のプロジェクトを一つ一つアンロード状態にしていくと、徐々に閉じる時間が短くなる。でもアンロードしたままだとビルドも出来ないじゃん。
もしやと思いノートンのAuto-Protectを無効にしてみる。すると先ほどまでの遅さがウソのように軽くなった。有効にしたときだけ遅くなるので、原因はこれのようだ。しかし無効にしているとセキュリティーリスクありの赤マークが目立つので鬱陶しい。Auto-Protectは有効にして、「スキャンの除外」設定にプロジェクトのディレクトリを指定した結果、無効にしたのと同じ結果が得られた。
今後、アンチウィルスソフトと開発環境の相性はちゃんと確認すべきかもしれない。例えば、アンチウィルスソフトの有無でコンパイルにかかる時間が変わるかどうかとかも調べてみたい。
半生シュークリーム×五個。
IEでcanvas要素を使えるようにするexcanvas.js。r3以降、transformメソッドが実装されているようなので最新のをtrunkから取ってきて試してみた。おお、ちゃんと倉庫番が表示された。……でもむちゃくちゃ重いよ。一マス動くのに何秒かかっているのか計りたくもない。あまりの重さにタスクマネージャを開いてみたら、仮想メモリサイズ欄が800MB!! これはダメだ……。
クロスブラウザでこういうことをやるんだったらFlash(Flex SDK)でやるべきだよなぁ。手軽さは減るけど。
ふへー、ようやく整理完了。一つ一つ動作確認をしながらの整理は大変だ。自動テストがあればなぁ。でもテストケースを用意するのも大変だけど。
マウスの要素内座標が取れるようになったので、簡単な例を一つ。
function getElementAbsPos(elem)
{
var x = 0;
var y = 0;
while(elem){
x += elem.offsetLeft;
y += elem.offsetTop;
elem = elem.offsetParent;
}
return {x:x, y:y};
}
function getMousePosOnElement(elem, ev)
{
if(!ev){ ev = event;}//for IE
if(elem.getBoundingClientRect){
var bcr = elem.getBoundingClientRect();
var x = ev.clientX - bcr.left;
var y = ev.clientY - bcr.top;
return {x:x, y:y};
}
else if(typeof(ev.pageX) == "number" && typeof(ev.pageY) == "number"){
var pos = getElementAbsPos(elem);
return {x:ev.pageX-pos.x, y:ev.pageY-pos.y};
}
else{
return {x:0, y:0};
}
}
var BORDER_WIDTH = 10;
var cv = document.createElement("canvas");
cv.setAttribute("width", "320");
cv.setAttribute("height", "240");
cv.style.cssText = "border: "+BORDER_WIDTH+"px solid;";
document.body.appendChild(cv);
var lastPoint = null;
cv.onmousedown = function(ev) {
lastPoint = getMousePosOnElement(cv, ev);
lastPoint.x -= BORDER_WIDTH;
lastPoint.y -= BORDER_WIDTH;
}
cv.onmousemove = function(ev) {
if(lastPoint){
var currPoint = getMousePosOnElement(cv, ev);
currPoint.x -= BORDER_WIDTH;
currPoint.y -= BORDER_WIDTH;
var ctx = cv.getContext("2d");
ctx.beginPath();
ctx.moveTo(lastPoint.x, lastPoint.y);
ctx.lineTo(currPoint.x, currPoint.y);
ctx.stroke();
lastPoint = currPoint;
}
}
cv.onmouseup = function(ev) {
lastPoint = null;
}
cv.onmouseout = function(ev) {
lastPoint = null;
}
例によってインタラクティブコンソールへ貼り付けて実行可能。
getMousePosOnElementより上は昨日書いたとおり。
borderを太くするとその分座標がずれてしまうので、そのあたりは適切に補正してやる必要がありました。
マウスイベントオブジェクトから得られる座標をある要素上の座標系へ変換したいのだが、これがなかなか簡単にはいかない。
色々調べてみるとgetBoundingClientRectというものがIEやFirefox、Operaでは使えるようなので、それを使うことにした。WebKitはつい最近実装したばかりのようだ。なので、getBoundingClientRectが使えればそれとclientX,clientYとの差分で求める。使えなければ、要素の絶対座標を適当に推測して、pageX,pageYとの差分で求める(IEはpageX,pageYをサポートしていないがgetBoundingClientRectの方を使うので問題ない)。
function getElementAbsPos(elem)
{
var x = 0;
var y = 0;
while(elem){
x += elem.offsetLeft;
y += elem.offsetTop;
elem = elem.offsetParent;
}
return {x:x, y:y};
}
function getMousePosOnElement(elem, ev)
{
if(!ev){ ev = event;}
if(elem.getBoundingClientRect){
var cr = elem.getBoundingClientRect();
var x = ev.clientX - cr.left;
var y = ev.clientY - cr.top;
return {x:x, y:y};
}
else if(typeof(ev.pageX) == "number" && typeof(ev.pageY) == "number"){
var pos = getElementAbsPos(elem);
return {x:ev.pageX-pos.x, y:ev.pageY-pos.y};
}
else{
return {x:0, y:0};
}
}
function onClick(elem, ev)
{
var pos = getMousePosOnElement(elem, ev);
alert(pos.x + "," + pos.y);
}
var elem = document.getElementById( ???? );
elem.onclick = function(ev) { onClick(elem, ev);}
とりあえず簡単なスクロール込みのhtmlでテストした感じでは大丈夫っぽい。CSSの指定によってはgetElementAbsPosあたりが怪しいけど。
マウスの要素内座標が簡単に求められないなんて、本当にどうかしていると思う。
今日もテキトーに問題を一つ作りました。
#######... #OO #... #OO #... # #... # @ #### # # #### B # ...# BB # ...# B # ...# # ...#######
ひょうたん型の地形が作りたかっただけです。こういう簡単なの、でも順序に少しだけ制約があって、あとは誤操作は気をつけなければならない程度の問題も良いですね。
ところで倉庫番って商標みたいなんですけど、言い換えってないんですかね。オセロに対するリバーシみたいな。