ASonJS _rotation にちょっとだけ対応
http://www.grkt.com/iphone/sample/rotation.html
_rotationにちょっと対応。とりあえず回転するようになった。やっとcanvas使った意味が出ました。
ただし、入れ子になったMovieClipには反映されなかったり、onclick を書いてあるのが canvas の親の div なのでタップできるところと絵がずれてたりするので今後の課題。あと原点を左上だけじゃなくて、いろいろ設定できるようにしたい。→入れ子以外は対応した
描画部分のスクリプト。やったのはこんな事。
１）canvasを回転させた画像が入るサイズにする
２）一番左と一番上の座標を取ってぴったりcanvas(contextか)に収まるように描画
３）原点（回転軸）がずれないように、canvasの位置を移動
僕は数学ができないので、もっと効率の良いやりかたがあったら教えてください。
MovieClip.prototype.__draw = function(img){
if(img != this._currentimage || this.__redraw){
var rad1 = this.__rotation / 180 * Math.PI;
var rad2 = (this.__rotation+90)/180 * Math.PI;
var w = img.attributes['width'].nodeValue* this.__xscale;
var h = img.attributes['height'].nodeValue* this.__yscale;
var x0 = w * Math.cos(rad1);
var x1 = h * Math.cos(rad2);
var x2 = x0+x1;
var y0 = h * Math.sin(rad2);
var y1 = w * Math.sin(rad1);
var y2 = y0+y1;
var offset_x = -Math.min(0, x0, x1, x2);
var offset_y = -Math.min(0, y0, y1, y2);
this._width =Math.abs(x0) + Math.abs(x1);
this._height = Math.abs(y0) + Math.abs(y1);
var context = this.canvas.getContext('2d');
context.translate(offset_x, offset_y);
context.rotate(rad1);
context.drawImage(img,0,0,w,h);
this.canvas.style.left = -offset_x;
this.canvas.style.top = -offset_y;
this._currentimage = img;
}
this.__redraw = false;
}
