BitmapData.copyPixelsを初級者が解説してみる
BitmapData.copyPixelsを初級者が解説してみる
@author Hiiragi
Liquid10000のFavoriteが100突破した記念です。
需要なさそうですが、自分の備忘録的な感じで書いてみます。
なんか前に比べて説明が味気ない気がしないでもないですが、
正直どこまで説明していいかというのが難しい・・・。
Bitmapクラス、BitmapDataクラスについては知ってるものとして
解説を進めてまいります。もしわかりづらいところがあれば
コメント欄やTwitter等で言っていただければと思います。
左上が切り抜かれる元のperlinNoise。
右上が、それをくり抜くためのアルファチャンネル。(アルファありバージョン。アルファなしは表示してません。
左下が、くりぬいた結果のBitmapData。（アルファなし
右下が、くりぬいた結果のBitmapData。（アルファあり
中級者・上級者の方へ。
・何かアドバイスや校正箇所があれば、ご指摘お願いします。
初心者・初級者の方へ。
・一緒に勉強しましょう。何か質問があればどうぞ。
今までの解説シリーズ
http://wonderfl.net/code/03190641c00b157abc0dbe7d6a513fa80ec987db
http://wonderfl.net/code/cafcb78df40b35b0c0d571dc8fd8f1bda791e4b4
http://wonderfl.net/code/1ff0e27a109b95c8462382ac907b0eec32eab7a1
http://wonderfl.net/code/b829ae193bd6d43ab81e104624597449361240f2
流れ
1．コピーしたい画像を作る。(perlinNoise)
2.キャンバスを作る。
3.アルファチャンネル用画像を作る
2.コピーしたい画像をアルファチャンネル用画像を利用して切り抜き、キャンバスにコピーする。(copyPixel)
package
{
import flash.display.*;
import flash.geom.*;
import flash.text.*;
import flash.events.Event;
/**
* BitmapData.copyPixelsを初級者が解説してみる
* @author Hiiragi
*
* Liquid10000のFavoriteが100突破した記念です。
* 需要なさそうですが、自分の備忘録的な感じで書いてみます。
* なんか前に比べて説明が味気ない気がしないでもないですが、
* 正直どこまで説明していいかというのが難しい・・・。
*
* Bitmapクラス、BitmapDataクラスについては知ってるものとして
* 解説を進めてまいります。もしわかりづらいところがあれば
* コメント欄やTwitter等で言っていただければと思います。
*
* 左上が切り抜かれる元のperlinNoise。
* 右上が、それをくり抜くためのアルファチャンネル。(アルファありバージョン。アルファなしは表示してません。
* 左下が、くりぬいた結果のBitmapData。（アルファなし
* 右下が、くりぬいた結果のBitmapData。（アルファあり
*
*
* 中級者・上級者の方へ。
* ・何かアドバイスや校正箇所があれば、ご指摘お願いします。
*
* 初心者・初級者の方へ。
* ・一緒に勉強しましょう。何か質問があればどうぞ。
*
*
* 今までの解説シリーズ
* http://wonderfl.net/code/03190641c00b157abc0dbe7d6a513fa80ec987db
* http://wonderfl.net/code/cafcb78df40b35b0c0d571dc8fd8f1bda791e4b4
* http://wonderfl.net/code/1ff0e27a109b95c8462382ac907b0eec32eab7a1
* http://wonderfl.net/code/b829ae193bd6d43ab81e104624597449361240f2
*
*/
/*
* 流れ
* 1．コピーしたい画像を作る。(perlinNoise)
* 2.キャンバスを作る。
* 3.アルファチャンネル用画像を作る
* 2.コピーしたい画像をアルファチャンネル用画像を利用して切り抜き、キャンバスにコピーする。(copyPixel)
*/
[SWF(width = 465, height = 465, frameRate = 30, backgroundColor = 0xFFFFFF)]
public class CopyPixelsTest extends Sprite
{
public function CopyPixelsTest():void
{
//おまじないみたいなものです。
//FlashDevelopだと、プロジェクトを作ったときに自動的にドキュメントクラスに書かれてます。
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
//おまじないの終わり。
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
//============ 切り抜く前のイメージを生成 ============
//perlinNoise
var perlinNoiseBmpd:BitmapData = new BitmapData(200, 200);
perlinNoiseBmpd.perlinNoise(200, 200, 7, 1, true, true);
//perlinNoiseだけだとわかりづらいので、文字を入れる
//TextFieldをBitmapDataにdrawすることによって、テキストがビットマップ化します。
var tField:TextField = new TextField();
tField.text = "wonderfl";
tField.setTextFormat(new TextFormat(null, 20));
perlinNoiseBmpd.draw(tField);
//============ copyPixels適用前を比較用に表示しておく ============
//これが左上の画像
var image1:BitmapData = new BitmapData(200, 200);
image1.draw(perlinNoiseBmpd);
this.addChild(new Bitmap(image1));
//============ 切り取り用の、丸型Sprite(アルファなし) ============
var sp1:Sprite = new Sprite();
var g:Graphics = sp1.graphics;
g.beginFill(0xFF0000);
g.drawCircle(50, 50, 50);
g.endFill();
//BitmapDataを作成して、丸型Spriteをdrawする（くり抜き用）
var alphaBmpd1:BitmapData = new BitmapData(100, 100, true, 0);
alphaBmpd1.draw(sp1);
//============ 切り取り用の、丸型Sprite(アルファあり) ============
//これが右上の画像
var sp2:Sprite = new Sprite();
g = sp2.graphics;
g.beginFill(0xFF0000, .3);
g.drawCircle(50, 50, 50);
g.endFill();
//比較用に表示しておく
sp2.x = 250;
this.addChild(sp2);
//BitmapDataを作成して、丸型Spriteをdrawする（くり抜き用）
var alphaBmpd2:BitmapData = new BitmapData(100, 100, true, 0);
alphaBmpd2.draw(sp2);
//============ copyPixels適用(アルファなし） ============
//これが左下の画像
var image2Bmpd:BitmapData = new BitmapData(200, 200, true, 0);
var image2Bmp:Bitmap = new Bitmap(image2Bmpd);
image2Bmp.y = 250;
this.addChild(image2Bmp);
/*copyPixelsします。ソース（写真）をアルファで切り取るイメージです。
* ヘルプ
* http://livedocs.adobe.com/flex/3_jp/langref/flash/display/BitmapData.html#copyPixels%28%29
*
* 以下のURLのイメージが参考になります。
* http://casualplay.net/blog/2005/11/flash_copypixels_1.html
*
* イメージとしては、
* perlinNoiseBmpdをalphaBmpd1の形とアルファを参考にして切り抜いて
* image2Bmpdに描く感じです。
*
* 第1引数-第3引数はコピーするソース関連、
* 第4引数-第6引数はアルファ関連という感じにセットになってます。
*
* 第4引数以降がないとどうなるかとかは、ForkやDownloadして確かめていただければと思います。
*
* 引数解説（詳しくはヘルプを参照してください）
* sourceBitmapData:BitmapData
* コピーしたいソース。今回はperlinNoiseBmpdをimage2Bmpdにコピーしたい。
* sourceRect:Rectangle
* perlinNoiseBmpdのどこからどこまでをコピーしたいのかっていう矩形領域。今回は全体。
* destPoint:Point
* sourceRectの矩形をimage2Bmpdのどこにコピーするか。
* alphaBitmapData:BitmapData(default = null)
* このBitmapDataに描いてある形とアルファを元に、sourceBitmapDataをくり抜く。
* 今回は丸型SpriteをdrawしたBitmapData。
* alphaPoint:Point (default = null)
* alphaBitmapDataのどこのポイントからアルファを適用し始めるか。
* これは多分実際に弄ってみないとわかりづらいかも。
* 下記URLの第5引数の部分を読むと少しわかるかも。計算式自体はよく判らないけど。
* http://www40.atwiki.jp/spellbound/pages/211.html
* mergeAlpha:Boolean(default = false)
* アルファを使うか使わないか。らしいですが、なんかtrueにしてもfalseにしても変わらんような。
*/
image2Bmpd.copyPixels(perlinNoiseBmpd,
new Rectangle(0, 0, 200, 200),
new Point(),
alphaBmpd1,
new Point(),
true);
//============ copyPixels適用（アルファあり） ============
//これが右下の画像
var image3Bmpd:BitmapData = new BitmapData(200, 200, true, 0);
var image3Bmp:Bitmap = new Bitmap(image3Bmpd);
image3Bmp.x = 250;
image3Bmp.y = 250;
this.addChild(image3Bmp);
//概ねアルファなしのやつと一緒。アルファチャンネル用BitmapDataが違うだけ。
image3Bmpd.copyPixels(perlinNoiseBmpd,
new Rectangle(0, 0, 200, 200),
new Point(),
alphaBmpd2,
new Point(),
true);
}
}
}