崖っぷちWEBデザイナーブログ

大阪てら子 23 「みんなで作る特別授業」行ってきました。
武田鉄矢ばりに参加者全員が先生になるという勉強会です。

今回は、怖くて手を出せなかった「マトリックス」を元に画像変形に挑戦してみました。
※アフィン変換や、射影変換と言われる変換方法を理解してから、actionscriptを書きたかったのですが、ちょっと理解不可能だったので、とりあえず、平行四辺形と台形の変形を実現することに力を注いでみた。

平行四辺形な変形

wonderflにUPしてみた

てらこ23で発表したものの説明１ - wonderfl build flash online

とりあえず、平行四辺形に変形してみた。Matrixのa,b,c,d,tx,tyのプロパティを以下のように設定し、画像に適応すると平行四辺形に変形します。

adobeのデベロッパーセンターに野中さんの記事より
a: 水平方向の伸縮率 = 変換後の幅/もとの幅
b: 垂直方向の傾斜率 = 垂直方向の傾斜/もとの幅
c: 水平方向の傾斜率 = 水平方向の傾斜/もとの高さ
d: 垂直方向の伸縮率 = 変換後の高さ/もとの高さ
tx: 水平方向の移動ピクセル数
ty: 垂直方向の移動ピクセル数

Matrix部分

private function _getTransformMatrix($pt0:Point, $pt1:Point, $pt2:Point):Matrix
{
	/*
	http://www.adobe.com/jp/devnet/flash/articles/matrix_class.html
	a: 水平方向の伸縮率 = 変換後の幅/もとの幅
	b: 垂直方向の傾斜率 = 垂直方向の傾斜/もとの幅
	c: 水平方向の傾斜率 = 水平方向の傾斜/もとの高さ
	d: 垂直方向の伸縮率 = 変換後の高さ/もとの高さ
	tx: 水平方向の移動ピクセル数
	ty: 垂直方向の移動ピクセル数
	*/
	var w:Number = _bmd.width;
	var h:Number = _bmd.height;
	var mat:Matrix = new Matrix();
	mat.a = ($pt1.x - $pt0.x) / w;
	mat.b = ($pt1.y - $pt0.y) / w;
	mat.c = ($pt2.x - $pt0.x) / h;
	mat.d = ($pt2.y - $pt0.y) / h;
	mat.tx = $pt0.x;
	mat.ty = $pt0.y;
	return mat;
}

Matrixを適応する部分

	_canvas.transform.matrix = newMatrix;

※_canvasに画像をaddChildしてます。 ※_canvasはSprite。

台形な変形

wonderflにUPしてみた

てらこ23で発表したものの説明２ - wonderfl build flash online

平行四辺形な変形は、どう頑張っても台形の変形は実現できません。ということで、三角形を２つ使用して台形を実現させます。
三角形？？何故に？？という方は以下の画像を！

三角形といえど、平行四辺形な変形と同様です。
多分ですが、この三角形はポリゴンと呼ばれるやつなのかもしれない。（推測）

Matrixを適応する部分

	_canvas.graphics.clear();
			
	//分割した１個目を描画
	_canvas.graphics.lineStyle(1 , 0x00FF00);
	_canvas.graphics.beginBitmapFill(_bmd , newMatrix1 );
	_canvas.graphics.moveTo(bP0.x , bP0.y );
	_canvas.graphics.lineTo(bP1.x , bP1.y );
	_canvas.graphics.lineTo(bP2.x , bP2.y );
	_canvas.graphics.endFill();
			
	//分割した２個目を描画
	_canvas.graphics.lineStyle(1 , 0x00FF00);
	_canvas.graphics.beginBitmapFill(_bmd , newMatrix2 );
	_canvas.graphics.moveTo(bP3.x , bP3.y );
	_canvas.graphics.lineTo(bP1.x , bP1.y );
	_canvas.graphics.lineTo(bP2.x , bP2.y );
	_canvas.graphics.endFill();

台形への描画は、ちょっと面倒くさいけど、beginBitmapFill とmoveToとlineToを使って描画してます。