Hatena::ブログ(Diary)

Higé au lait Twitter

 | 

2007年05月31日

Canvas で遊んでみる 3

昨日の 画像回転 bookmarklet を 0度から360度の任意の値に対応した。


javascript:(function(){var l=location.href;var deg=prompt("0-360","");location.href='data:text\/html;charset=utf8,<html><head><script type="text\/javascript" src="http:\/\/labo.higeorange.com\/js\/rotate.js"><\/script><\/head><body onload="draw(\''+l+'\','+deg+')"><canvas id="canvas"><\/canvas><\/body><\/html>'})();

JavaScript の部分が長くなったので外部化している。

http://labo.higeorange.com/js/rotate.js

使いかた

画像を開いた状態で上記のブックマークレットを発動させると プロンプトがでるので回転させたい値を入力。ただし 0 〜 360 の間の値。



三角関数つかうなんて久しぶり過ぎて混乱しまくった。

参考

回転移動の1次変換

追記

opera.postError() を消しわすれてため Firefox でうまく動かない問題を修正。

Fedora 7

no title

出たようだ。 数日後に入れる予定。

2007年05月30日

Canvas で遊んでみる 2

画像を回転させる Bookmarklet を作ってみた。

javascript:(function(){var l=location.href;location.href='data:text\/html;charset=utf8,<html><head><script type="text\/javascript">function draw(){var canvas=document.getElementById("canvas");var img=document.createElement("img");img.src=\"'+l+'\";canvas.setAttribute("width",img.height);canvas.setAttribute("height", img.width);var ctx=canvas.getContext("2d");ctx.rotate(90*Math.PI/180);ctx.translate(0,-1*img.height);ctx.drawImage(img,0,0)}<\/script><\/head><body onload="draw()"><canvas id="canvas"><\/canvas><\/body><\/html>'})();

時計回りに90度回転させる ブックマークレット。 他の度数にする場合はさらに座標系をいじらないといけない。

使いかた

画像を開いて上記のブックマークレットを発動させるだけ。

Opera or Firefox で試してみてね。

javascript の部分を 抜き出してみる

function draw(){
    var canvas = document.getElementById("canvas");
    var img = document.createElement("img");
        img.src = "画像URL";
        canvas.setAttribute("width", img.height);
        canvas.setAttribute("height", img.width);
    var ctx = canvas.getContext("2d");
        ctx.rotate(90 * Math.PI / 180);
        ctx.translate(0, -1 * img.height);
        ctx.drawImage(img, 0, 0)
}

ポイント

rotate で回転させるわけだがcanvas要素の左下左上を中心に回るので 回転分を考慮して translate で座標系を移動させないといけない。

180 度だと

        canvas.setAttribute("width", img.width);
        canvas.setAttribute("height", img.height);
    var ctx=canvas.getContext("2d");
        ctx.rotate(Math.PI);
        ctx.translate( -1 * img.width, -1 * img.height);
        ctx.drawImage(img, 0, 0)

でいけると思う。


追記

重大な勘違いをしていた。 rotate させると座標も回転すことに気づいた。 だから rotate させる前に translate させといた方が混乱せずにすむ。


一般

どんな角度にも対応できるようにしようとしてるんだけど,頭がこんがらがって求めたいものが出ない。

とりあえず 0 〜 90 度 まではできたんだけどそれより上ができない。ダメだ。

2007年05月28日

Canvas で遊んでみる。

おもしろい。


で, CanvasRenderingContext2D を拡張してみる。

CanvasRenderingContext2D.prototype.strokeLine = function(path, closePath) { 
    var begin = path.shift(); 
    this.beginPath(); 
    this.moveTo(begin[0], begin[1]); 
    for(var i=0;i<path.length;i++) { 
        this.lineTo(path[i][0], path[i][1]); 
    } 
    if(closePath) this.closePath(); 
    this.stroke(); 
} 

配列を引数にとり,下記のように使う。

canvas.storokeLine([
  [10, 0],
  [10, 20],
  [30, 20],
])

(10, 0) からはじまり (10,20) で折れ曲がり (30, 20) で終わる線がひける。

ちょい改造。 第2引数でパスを閉じるかどうか指定できるようにした。


他の拡張も考え中。

新しいスタイル(色とか線の太さとか)を設定するためにはオブジェクトを渡して for in で反映させればいいか。

CanvasRenderingContext2D.prototype.setStyle = function(o) {
    for(var i in o) {
        this[i] = o[i];
    }
}
canvas.setStyle({
    lineWidth : 10,
    globalAlpha : 0.5,
    lineJoin : "round",
    lineCap : 'squqre',
    strokeStyle : 'red'
});

こんな風に使う。

2007年05月27日

今日買った本

JavaScriptクイックリファレンス

JavaScriptクイックリファレンス


バイトの給料でたから買った。 3000円の価値があるかどうかは微妙なところ。


感想を少し

クイックリファレンスという名前のとおり内容は,クラスを列挙してプロパティ,メソッド等を軽く説明しているだけ(ただし,JavaScript 1.5 の内容を網羅していると思う)。 JavaScript がまったくわからないという人にはちょっときつい内容だと思う。使用例が書かれているものが少ないのもきついところ。

ただ, JavaScript 第3版には書かれていなかった新しいもの (XMLHttpRequest, Canvas, etc.) が書かれているのはいいところ。


JavaScript のリファレンス本としては


のほうが使用例が多く載っているためわかりやすくていいと思う。内容は少し古いけど。


同じ日に出た 初めてのJavaScript のほうがよかったかもしれない。

2007年05月09日

今日買った CD

GREEN

GREEN

2007年05月08日

検索ハイライトを消す方法

vim

set hlsearch

にしてる場合。一度 "/" or "?" で検索した場合。 ずっとハイライトしてうるのはうっとうしいので,

namap <silent> gh :nohlsearch<CR>

とした。

追記

この方法だとまた "n" or "Shift + n" を押したら同じ単語で検索するのか。

参考

set hlsearch

 |