Hinh bitmap , mặt khác, mô tả một hình ảnh như là một lưới chữ nhật của các giá trị, với một giá trị màu ñược gán cho mỗi ñiểm ảnh.. Hai ưu ñiểm chính của ñồ họa vectơ là phóng to (sca[r]
(1)1 BITMAPS
Flash giới thiệu lớp BitmapData, bổ sung quan trọng cho chương trình thời điểm Từ ñời , Flash ñã ñược xem cơng cụ dựa đồ hoạ vectơ Hình đồ họa véc tơ hình đồ hoạ mà yếu tố đồ họa mổ tả tốn học Ví dụ, dịng bắt đầu điểm x0, y0 kéo dài đến điểm x1, y1 mơ tả phương trình đường thẳng Hinh bitmap , mặt khác, mơ tả hình ảnh lưới chữ nhật giá trị, với giá trị màu ñược gán cho điểm ảnh
Hai ưu điểm đồ họa vectơ phóng to (scale) kích thước file bé Khi phóng to hình vectơ khơng bị “bể hạt” , trái lại hình bitmap bị bể hạt nhiều Do hình bitmap tạo ñiểm ảnh màu nên việc lưu giữ thông tin ñiểm ảnh làm cho cho dung lượng file hình bitmap lớn nhiều
Tuy nhiên ưu ñiểm bitmap ñễ dàng render nên hiệu hình ảnh bitmap khơng zoom tốt nhiều ( ảnh chụp lưu hình ảnh dạng bitmap ) quan trọng máy tính xử lý hình ảnh bitmap với tốc độ nhanh nên làm ảnh động với bitmaps tạo hiệu ứng ñộng tốt
-
ðối tượng bitmap ñược tạo từ lớp Bitmap lấy thơng tin từ đối tượng BitmapData,thuộc package flash.display
Hàm tạo bitmapData sau
import flash.display.BitmapData;
var bitmap:BitmapData = new BitmapData(chiều rộng, chiều cao,ñộ
trong suốt, màu)
tham số độ suốt có giá trị Booolean : true hay false
Sau tạo liệu bitmap lưu bitmapData , ta tạo thêm đối tượng bitmap để lấy thơng tin dùng phương thức addChild() ñể ñưa ñối tượng bitmap vào danh sách hiển thị
Ví dụ sau cho hình với độ suốt thiết lập khác cặp hình chọn màu giống
var bitmap:BitmapData = new BitmapData(100, 200, true, 0x99223344);
var image:Bitmap = new Bitmap(bitmap);
var bitmap2:BitmapData = new BitmapData(200, 100, true, 0xabaaaa00);
var image2:Bitmap = new Bitmap(bitmap2); addChild(image);
addChild(image2);
(2)var image3:Bitmap = new Bitmap(bitmap3); image3.x=300;
var bitmap4:BitmapData = new BitmapData(200, 100,false, 0xabaaaa00);
var image4:Bitmap = new Bitmap(bitmap4); image4.x=300;
addChild(image3); addChild(image4);
ðể chuyển ñối tượng hiển thị hay graphics vào vùng chứa ñối tượng bitmap ta dùng phương thức : draw(đối tượng hiển thị)
Ví dụ :
var bitmap:BitmapData = new BitmapData(100, 100,true, 0x00ffffff); var sprite:Sprite = new Sprite( );
sprite.graphics.beginFill(0xff0000, 100); sprite.graphics.drawEllipse(0, 25, 100, 50); sprite.graphics.endFill( );
bitmap.draw(sprite);
Trong ví dụ sau ta có vùng bitmap kích thước (100x60) màu đỏ Có hình graphics ellip có kích thước (50x30) đặt vùng bitmap, có ellip không chuyển vào vùng bitmap ellip chuyển vào bitmap Kết chạy chương trình cho phóng đại lên 400% Ví dụ:
var bitmap:BitmapData = new BitmapData(100, 60,
true, 0xffff1122); var bit:Bitmap=new Bitmap(bitmap);
var sprite:Sprite = new Sprite( );
sprite.graphics.beginFill(0x123423, 100); sprite.graphics.drawEllipse(0, 45, 50, 30); sprite.graphics.endFill( );
(3)3 addChild(sprite);
addChild(bit);
var sprite1:Sprite = new Sprite( );
sprite1.graphics.beginFill(0x123423, 100); sprite1.graphics.drawEllipse(0, 10, 50, 30); sprite1.graphics.endFill();
addChild(sprite1);
ðưa hình ảnh bên ngồi vào đối tượng bitmap:
Hình ảnh bên ngồi dạng ñưa vào ñối tượng bitmap ñều trở hình bitmap Ta dùng lớp flash.display.Loader để tải hình ảnh , sau lấy content loader đưa vào đối tượng bitmap, cuối dùng addChild() hình ảnh hiển thị
Ví dụ :
(4)var _loader:Loader = new Loader( );
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
_loader.load(new URLRequest("image.png"));
function onComplete(event:Event):void {
var image1:Bitmap = Bitmap(_loader.content); var bitmap:BitmapData = image1.bitmapData; addChild(image1);
}
ðây hình gốc phóng đại 400%, file hình png
(5)5
Sau load hình ảnh vào đối tượng bitmap ta xử lý hình ảnh đối tượng bitmap thơng thường
Nếu thay hàm onComplete() hàm sau ñây ( ñược ñưa thêm vào vài tính chất khác ) : function onComplete(event:Event):void {
var loadedImage:Bitmap = Bitmap(_loader.content);
var bitmap:BitmapData = new BitmapData(loadedImage.width, loadedImage.height, true, 0xffabffaf); bitmap.draw(loadedImage, new Matrix( ))
var image:Bitmap = new Bitmap(bitmap); addChild(image);
bitmap.fillRect(new Rectangle(0, 0, 50, 50), 0x0xfcf12ffff);
}
(6)ðọc thiết lập màu cho pixel
Ta dùng phương thức :getPixel( ), setPixel( ), getPixel32( ), setPixel32( ) lớp BitmapData getPixel( ), setPixel( ) ñược dùng với hình ảnh màu đục , cịn getPixel32( ), setPixel32( ) có hổ trợ xử lý độ suốt Lưu ý với hình ảnh 24-bit màu red, green, blue màu chiếm 8-bit ,cịn hình 32-bit có thêm bit dành cho độ suốt
getPixel(x,y ), setPixel(x,y,màu )
getPixel32( x,y ), and setPixel32( x,y,màu) x,y (int) toạ độ điểm màu có đơn vị uint Việc xét ñiểm xử lý giá trị màu chúng giúp cho xử lý ảnh nhiều
Ví dụ sau thiết lập bitmap 32-bit cho 10000 ñiểm màu khác vào bitmap: var bitmap:BitmapData = new BitmapData(400, 400, true, 0xff0affff);
var image:Bitmap = new Bitmap(bitmap); addChild(image);
for(var i:int = 0; i < 10000; i++) {
bitmap.setPixel32(Math.round(Math.random( ) * 400), Math.round(Math.random( ) * 400), Math.random()*100000000*i);
(7)7 Kết quả:
BitmapData hàm noise() tiện dụng để tạo hình ảnh noise ( hình ảnh vỡ hạt)
noise(số điểm:int, màu thấp :uint = 0, màu cao:uint = 255, kênh
màu:uint = 7,xám :Boolean = false)
Ví dụ:
import flash.display.Bitmap; import flash.display.BitmapData;
import flash.display.BitmapDataChannel;
var bmd1:BitmapData = new BitmapData(80, 80); var bmd2:BitmapData = new BitmapData(80, 80); var seed:int = int(Math.random() * int.MAX_VALUE);
bmd1.noise(seed, 0, 0xFF, BitmapDataChannel.RED, false); bmd2.noise(seed, 0, 0xFF, BitmapDataChannel.RED, true); var bm1:Bitmap = new Bitmap(bmd1);
this.addChild(bm1);
var bm2:Bitmap = new Bitmap(bmd2); this.addChild(bm2);
(8)Kết quả:
Ví dụ:
package {
import flash.display.Sprite; import flash.display.Bitmap; import flash.display.BitmapData; import flash.text.TextField; import flash.events.Event;
public class ColorChooser extends Sprite { private var _bitmap:BitmapData;
private var _textfield:TextField; public function ColorChooser( ) {
_bitmap = new BitmapData(300, 300, false, 0xffffffff); var image:Bitmap = new Bitmap(_bitmap);
addChild(image);
_bitmap.noise(1000, 0, 255, 1|2|4, false);
(9)9 _textfield.y = 100;
addEventListener(Event.ENTER_FRAME, onEnterFrame); }
public function onEnterFrame(event:Event):void {
var colorVal:Number = _bitmap.getPixel(mouseX, mouseY) _textfield.text = "#" +
colorVal.toString(16).toUpperCase( ); }
} } Kết quả:
ðổ màu vùng bitmap hình chữ nhật :
Dùng phương thức : fillRect(rect:Rectangle, color:uint) Ví dụ :
bitmap = new BitmapData(100, 100, false, 0xffffffff); var image:Bitmap = new Bitmap(_bitmap);
addChild(image);
(10)Ví dụ: Ví dụ sau tạo nhiều bitmap nhiều hình chữ nhật cho bitmap xoay import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.BitmapDataChannel;
var _bitmap = new BitmapData(50, 180, true, 0xfbffbfff);
for( var i:int=1;i<50;i++){
var image:Bitmap = new Bitmap(_bitmap); image.x=200;
image.y=200;
image.rotation=25*i; addChild(image);
var rec:Rectangle=new Rectangle(0,0, i, 3*i); _bitmap.fillRect(rec, 0xffaa0000);
}
(11)11 floodFill(x:int, y:int, color:uint)
Phương thức tương tự việc sử dụng Paint Bucket Photoshop hay chương trình vẽ khác
Ví dụ : chương trình sau ta tạo hình chữ nhật với màu khác vùng Bitmap có mau trắng.Ta chọn màu nâu.Sau ta đổ màu cho hình chữ nhật nhỏ thành màu ñen
import flash.display.Bitmap; import flash.display.BitmapData;
import flash.display.BitmapDataChannel;
var myBitmapData:BitmapData = new BitmapData(240, 240,false, 0xffffffff);// mau trang
var rect:Rectangle = new Rectangle(10, 10, 80, 90); myBitmapData.fillRect(rect, 0x8895E61A);//xanh la ma rect = new Rectangle(25, 25, 40, 50);
myBitmapData.fillRect(rect, 0xFF0000FF);//xanh
myBitmapData.floodFill(30, 30, 0x00000000);//den
var bm:Bitmap = new Bitmap(myBitmapData); addChild(bm);
(12)Ví dụ : chương trình sau tạo 20 hình vng với màu khác , hình bitmap chọn màu trắng Khi kích chuột vào hay hình vng hình vng đổi màu Ví dụ minh hoạ việc đổ màu cho vùng chọn , vùng kích chuột
package {
import flash.display.Sprite; import flash.display.Bitmap; import flash.display.BitmapData; import flash.events.MouseEvent; import flash.geom.Rectangle;
public class FloodFillDemo extends Sprite { private var _bitmap:BitmapData;
public function FloodFillDemo ( ) { var sprite:Sprite = new Sprite( ); addChild(sprite);
_bitmap = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0xffffffff);
for(var i:int = 0; i < 20; i++) { _bitmap.fillRect(new Rectangle(
(13)13
50, 50), Math.random( ) * 0xffffffff);
}
var image:Bitmap = new Bitmap(_bitmap); sprite.addChild(image);
sprite.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
}
public function onMouseDown(event:MouseEvent):void { _bitmap.floodFill(mouseX, mouseY, 0xffff0000); }
} }
ðây hình lúc khởi chạy :
(14)Sao chép Pixel:
Phương thức copyPixels () cho phép copy hình chữ nhật BitmapData sang bitmapData khác
copyPixels(BitmapData nguồn :BitmapData, Hình chữ nhật
(15)15
Code sau chia hình thành nhiều hình chữ nhật ,copy hình chữ nhật đặt vào bitmap package {
import flash.display.Sprite; import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Loader; import flash.net.URLRequest; import flash.events.Event; import flash.geom.Point; import flash.geom.Rectangle;
public class AS3CB extends Sprite { private var _bitmap:BitmapData; private var _loader:Loader; public function AS3CB( ) { _loader = new Loader( );
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoad); _loader.load(new URLRequest("myphoto.jpg"));
(16)}
public function onLoad(event:Event):void {
var loaderBmp:Bitmap = Bitmap(_loader.content); var w:Number = loaderBmp.width / 10;
for(var i:int = 0; i < 10; i++) {
_bitmap.copyPixels(loaderBmp.bitmapData, new Rectangle(i * w, 0,
w, loaderBmp.height), new Point(i * (w + 2), i));
} } } }
Ta hình sau:
Nếu thay ñổi tham số cuối lệnh
_bitmap.copyPixels(loaderBmp.bitmapData, new Rectangle(i * w, 0,
w, loaderBmp.height), new Point(i * (w + 2), i));
(17)17
_bitmap.copyPixels(loaderBmp.bitmapData, new Rectangle(i * w, 0,
w, loaderBmp.height), new Point(400-30*I,10*i);
ta ñược hình sau:
Sao chép kênh màu :
ðể chép kênh màu ta dùng phương thức:
public function copyChannel( BitmapData nguồn:BitmapData, hình chữ
nhật nguồn:Rectangle, ñiểm ñích :Point, Channelnguồn :uint,
Channel ñích:uint):void
Ví dụ : ví dụ copy channaelel.RED vào channel.GREEN bitmapData có màu xác pháo (FF0099) Kênh RED FF ñược copy qua kênh GREEN 00 ta ñược kênh FFFF99 có màu vàng nhạt
(18)import flash.geom.Point;
var bmd:BitmapData = new BitmapData(100, 80, false, 0x00FF0099);// mau xac phao
var rect:Rectangle = new Rectangle(0, 0, 20, 20); var pt:Point = new Point(20, 20);
bmd.copyChannel(bmd, rect, pt,
BitmapDataChannel.RED,BitmapDataChannel.GREEN);
var bm:Bitmap = new Bitmap(bmd); this.addChild(bm);
(19)19 PerlinNoise()
Vỡ hạt kiểu Perlin thuật toán nội suy kết hợp hàm noise ngẫu nhiên tạo thành hàm cho phép tạo loại vỡ hạt mịn đẹp so với hàm noise thơng thường Người ta hay dùng kỷ thuật ñể tạo pattern
perlinNoise(chieu rong:Number, chieu dai:Number,số ham noise cần
dùng:uint, số hạt giống:int, ñộ mượt chổ nối:Boolean,
fractalNoise:Boolean, channelOptions:uint = 7, grayScale:Boolean =
false, offsets:Array = null)
Ví dụ:
import flash.display.Bitmap; import flash.display.BitmapData;
var bmd:BitmapData = new BitmapData(550, 400, false, 0x00CCFFCC); var seed:Number = Math.floor(Math.random() * 10);
var channels:uint = BitmapDataChannel.RED | BitmapDataChannel.BLUE; bmd.perlinNoise(100, 80, 6, seed, false, true, channels, false, null);
var bm:Bitmap = new Bitmap(bmd); addChild(bm);
(20)(21)(22)Muốn thay ñổi giá trị số pixel bitmap ta dùng phương thức Threshold
threshold(BitmapData nguồn:BitmapData, hình chữ nhật
nguồn:Rectangle, điểm đích:Point, phép tốn:String, threshold:uint,
color:uint = 0, mask:uint = 0xFFFFFFFF, copySource:Boolean = false)
phép toán phép : "<", "<=", ">", ">=", "==", "!=" Ví dụ: import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.BitmapDataChannel; import flash.geom.Point; import flash.geom.Rectangle;
var bmd1:BitmapData = new BitmapData(200, 200, true, 0xFFCCCCCC); var seed:int = int(Math.random() * int.MAX_VALUE);
var channels:uint = BitmapDataChannel.RED | BitmapDataChannel.BLUE; bmd1.perlinNoise(100, 80, 12, seed, false, true, channels, false, null);
var bitmap1:Bitmap = new Bitmap(bmd1); addChild(bitmap1);
var bmd2:BitmapData = new BitmapData(200, 200, true, 0xFFCCCCCC); var pt:Point = new Point(0, 0);
var rect:Rectangle = new Rectangle(0, 0, 200, 200); var threshold:uint = 0x00800000;
var color:uint = 0x20FF0000; var maskColor:uint = 0x00FF0000;
bmd2.threshold(bmd1, rect, pt, ">", threshold, color, maskColor, true);
var bitmap2:Bitmap = new Bitmap(bmd2);
bitmap2.x = bitmap1.x + bitmap1.width + 10; addChild(bitmap2);
(23)23 Sử dụng lọc màu cho Bitmap
Ta dùng phương thức applyFilter()
applyFilter(BitmapData nguồn:BitmapData: hình chữ nhật
nguồn:Rectangle, điểm đích:Point, filter:BitmapFilter)
Ví dụ:
import flash.display.Bitmap; import flash.display.BitmapData; import flash.geom.Point;
import flash.geom.Rectangle; import flash.filters.BlurFilter;
(24)bmd.fillRect(rect, 0xFF00bb);
var pt:Point = new Point(80, 100); var filter:BlurFilter = new BlurFilter(); bmd.applyFilter(bmd, rect, pt, filter);
var bm:Bitmap = new Bitmap(bmd); addChild(bm);
Kết quả:
Ví dụ: Ví dụ tạo ảnh mờ áp dụng filter làm ta có cảm giác khói , di chuyển chuột hình tạo theo vị trí chuột
package {
(25)25 import flash.events.Event; import flash.geom.Point;
public class FilteredBitmap extends Sprite { private var _bitmap:BitmapData;
private var _image:Bitmap;
private var _blurFilter:BlurFilter;
public function FilteredBitmap( ) {
_bitmap = new BitmapData(stage.stageWidth, stage.stageHeight,
false, 0xff000000); _image = new Bitmap(_bitmap);
addChild(_image);
_blurFilter = new BlurFilter( );
addEventListener(Event.ENTER_FRAME, onEnterFrame); }
public function onEnterFrame(event:Event):void { for(var i:int = 0; i < 100; i++) {
_bitmap.setPixel(mouseX + Math.random( ) * 20 - 10,
mouseY + Math.random( ) * 20 - 10, 0xffffffff);
}
_bitmap.applyFilter(_bitmap, _bitmap.rect, new Point( ), _blurFilter);
(26)Sự hoà tan bitmap
Phương thức pixelDissolve() lớp bitmapData cho phếp copy màu vài ñiểm bitmap ñưa vào bitmap thứ Sau nhiều lần gọi hàm ta thấy bitmap ñầu hồ tan vào bitmap sau:
pixelDissolve(BitmapData nguồn:BitmapData, hình chữ nhật
nguồn:Rectangle, điểm đích:Point, số hạt:int = 0, số pixels:int =
0, fillColor:uint = 0)
Ví dụ:
import flash.display.BitmapData; import flash.display.Bitmap; import flash.geom.Point; import flash.geom.Rectangle; import flash.utils.Timer;
import flash.events.TimerEvent;
var bmd:BitmapData = new BitmapData(100, 80, false, 0x00CCCCCC); var bitmap:Bitmap = new Bitmap(bmd);
(27)27 var tim:Timer = new Timer(20); tim.start();
tim.addEventListener(TimerEvent.TIMER, timerHandler);
function timerHandler(event:TimerEvent):void {
var randomNum:Number = Math.floor(Math.random() * int.MAX_VALUE);
dissolve(randomNum); }
function dissolve(randomNum:Number):void { var rect:Rectangle = bmd.rect;
var pt:Point = new Point(0, 0); var numberOfPixels:uint = 100; var red:uint = 0x00FF0000;
bmd.pixelDissolve(bmd, rect, pt, randomNum, numberOfPixels, red);
var grayRegion:Rectangle = bmd.getColorBoundsRect(0xFFFFFFFF, 0x00CCCCCC, true);
if(grayRegion.width == && grayRegion.height == ) { tim.stop();
} }
Cuộn Bitmap:
Dùng phương thức scroll(x,y) lớp bitmapdata (x,y) số pixel ñược dịch chuyển theo phương x,y Ví dụ:
import flash.display.*;
import flash.display.BitmapData; import flash.geom.Rectangle;
var _bitmap:BitmapData = new BitmapData(300, 300, false, 0xff1BED83);
_bitmap.perlinNoise(10, 20, 6, 1000, false, true,
BitmapDataChannel.RED | BitmapDataChannel.BLUE, false, null); var _image:Bitmap = new Bitmap(_bitmap);
addChild(_image);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
(28)