Rss Feed

Talos

blog pro osvícence, kteří neovládají gramatiku

Grafický editor – 1.díl AS3

Březen 11th, 2010 od , v kategorii Flash. Bez komentářů

Tentokrát, jsem připravil ukázku rastrového grafického editoru se základními funkcemi, hlavně se budu zabývat objektem BitmapData a jeho vybranými metodami.

Nejdřív začneme s úplně tím nejzkládnějším a to je nakreslení čáry. Budu předpokládat, že máme nějakou plochu.(plane)

var helpSprite:Sprite = new Sprite();
addChild(helpSprite);
var mouse:Boolean = false;
var size:Number = 10;
var color:uint = 0;
var circle:Sprite = new Sprite();
addChild(circle);
setSize();
 
plane.addEventListener(Event.ENTER_FRAME,move);
plane.addEventListener(MouseEvent.MOUSE_DOWN,mouseDown);
plane.addEventListener(MouseEvent.MOUSE_UP,mouseUp);
 
function move(evt:Event):void{
	circle.x = plane.mouseX;
	circle.y = plane.mouseY;
	if(mouse){
		helpSprite.graphics.lineTo(plane.mouseX,plane.mouseY);
	}
}
 
function mouseDown(evt:MouseEvent):void{
	mouse = true;
	helpSprite.graphics.lineStyle(size*2,color);
	helpSprite.graphics.moveTo(plane.mouseX,plane.mouseY);
}
function mouseUp(evt:MouseEvent):void{
	mouse = false;
}
function setSize():void{
	circle.graphics.clear();
	circle.graphics.beginFill(color,0.8);
	circle.graphics.drawCircle(0,0,size);
}

Další funkce grafického programu je guma, ale kvůli ní si musíme uvědomit, že pokud chceme gumovat musíme mít odkud. To znamená, že musíme vykreslovat tu čáru do Bitmapy. Takže po úpravě to bude vypadat nějak takto.

var helpSprite:Sprite = new Sprite();
var bmpData:BitmapData = new BitmapData(plane.width,plane.height,true,0xff);
var vrstva1:Sprite = new Sprite();
var bmp:Bitmap = new Bitmap(bmpData,"auto",true);
vrstva1.addChild(bmp);
addChild(vrstva1);
 
var mouse:Boolean = false;
var size:Number = 10;
var color:uint = 0;
var circle:Sprite = new Sprite();
addChild(circle);
setSize();
 
plane.addEventListener(Event.ENTER_FRAME,moving);
plane.addEventListener(MouseEvent.MOUSE_DOWN,mouseDown);
plane.addEventListener(MouseEvent.MOUSE_UP,mouseUp);
 
function moving(evt:Event):void{
	circle.x = plane.mouseX;
	circle.y = plane.mouseY;
	if(mouse){
		helpSprite.graphics.lineTo(plane.mouseX,plane.mouseY);
		bmp.draw(bmpData);
	}
}
 
function mouseDown(evt:MouseEvent):void{
	mouse = true;
	helpSprite.graphics.lineStyle(size*2,color);
	helpSprite.graphics.moveTo(plane.mouseX,plane.mouseY);
}
function mouseUp(evt:MouseEvent):void{
	mouse = false;
	helpSprite.graphics.clear();
}
function setSize():void{
	circle.graphics.clear();
	circle.graphics.beginFill(color,0.8);
	circle.graphics.drawCircle(0,0,size);
}

Teď už můžeme přidat další funkci. Gumování může vypadat, tak že budeme mít v nějakém původním objektu BitmapData nějaký výchozí stav, do kterého budeme přepisovat aktuální objekt BitmapData. Kód by mohl vypadat nějak takto.

function moving():void{
	circle.x = plane.mouseX;
	circle.y = plane.mouseY;
	if(mouse){
		var offset = new Point(plane.mouseX-size , plane.mouseY-size );
		var drawRect = new Rectangle(offset.x, offset.y, size*2, size*2);
		bmpData.copyPixels(bmpData, drawRect, offset, bmpDataEdge, new Point(0,0), false);
	}
}
function prepare():void{
	eraseCircle.graphics.beginFill(0);
	eraseCircle.graphics.drawCircle(size,size,size);
 
	bmpDataEdge = new BitmapData(size*2, size*2, true, 0xFFFFFFFF);
	var rect:Rectangle=new Rectangle(bmpDataEdge.width,bmpDataEdge.height);
	bmpDataEdge.draw(eraseCircle);
	bmpDataEdge.copyChannel(bmpDataEdge, bmpDataEdge.getColorBoundsRect(0xFFFFFF,0,true), new Point(), 1, 8);
}

Funkce prepare se musí vykonat před použítím gumy.
A poslední funkce grafické aplikace bude výplň. Ta lze udělat velmi snadno.

bmpData.floodFill(plane.mouseX,plane.mouseY,ARGB);

Důležité snad je, že se zde zadává barva v jiném formátu než normálně. Formát ARGB přidává jako první číslici ještě hodnotu alphy (průhlednost).

Zdrojové soubory, jsou k dispozici zde.
Ukázka je níže.