Çizgi ve eğriler çizme

Bir Shape, Sprite veya MovieClip örneğinin graphics özelliğiyle çizim yapmak için, öncelikle çizim sırasında kullanılacak stili (çizgi boyutu ve rengi, dolgu rengi) tanımlamanız gerekir. Adobe® Flash® Professional veya başka bir çizim uygulamasındaki çizim araçlarını kullandığınızda olduğu gibi, çizim yapmak için ActionScript'i kullandığınızda da konturlu veya kontursuz ya da dolgu rengi ile veya dolgu rengi olmadan çizim yapabilirsiniz. lineStyle() veya lineGradientStyle() yöntemini kullanarak konturun görünümünü belirtirsiniz. Düz çizgi oluşturmak için, lineStyle() yöntemini kullanın. Bu yöntemi çağırırken en yaygın değer olarak şu üç parametreyi belirtirsiniz: çizgi kalınlığı, rengi ve alfası. Örneğin, bu kod satırı, myShape adındaki Shape öğesine, 2 piksel kalınlığında, kırmızı (0x990000) ve %75 opak çizgiler çizmesini bildirir:

myShape.graphics.lineStyle(2, 0x990000, .75);

Alfa parametresinin varsayılan değeri 1,0 (%100) şeklindedir, bu nedenle tamamen opak bir çizgi istiyorsanız bu parametreyi devre dışı bırakabilirsiniz. lineStyle() yöntemi, piksel ipucu ve ölçek modu için iki ek parametre daha kabul eder. Bu parametrelerin kullanımı hakkında daha fazla bilgi almak için, http://help.adobe.com/tr_TR/FlashPlatform/reference/actionscript/3/flash/display/Graphics.html#lineStyle()'ndaki Graphics.lineStyle() yönteminin açıklamasına bakın.

Degrade çizgi oluşturmak için, lineGradientStyle() yöntemini kullanın. Bu yöntem, Degrade çizgiler ve dolgular oluşturma bölümünde açıklanır.

Dolgu uygulanmış bir şekil oluşturmak istiyorsanız, çizime başlamadan önce beginFill(), beginGradientFill(), beginBitmapFill() veya beginShaderFill() yöntemlerini çağırırsınız. Bunlar arasında en temel olan beginFill() yöntemi iki parametre kabul eder: dolgu rengi ve (isteğe bağlı olarak) dolgu rengi için bir alfa değeri. Örneğin, düz yeşil dolgu içeren bir şekil çizmek istiyorsanız, şu kodu kullanırsınız (myShape adında bir nesne üzerinde çizim yaptığınız varsayılarak):

myShape.graphics.beginFill(0x00FF00);

Herhangi bir dolgu yöntemi çağrıldığında, yeni bir dolguya başlanmadan önce bir önceki dolgu örtük olarak sonlandırılır. Kontur stili belirten bir yöntemin çağrılması, bir önceki konturu değiştirir ancak önceden belirtilen dolguyu değiştirmez veya tam tersi de olabilir.

Çizgi stilini ve dolgu özelliklerini belirttikten sonraki adım, çiziminizin başlangıç noktasını belirtmektir. Graphics örneği, kağıttaki kalem ucu gibi bir çizim noktasına sahiptir. Çizim noktasının konumlandırıldığı her yer, bir sonraki çizim eyleminin başlayacağı yeri belirtir. Başlangıçta Graphics nesnesinin çizim noktası, üzerinde çizildiği nesnenin koordinat alanında 0, 0 noktasında bulunur. Farklı bir noktada çizimi başlatmak için, çizim yöntemlerinden birini çağırmadan önce ilk olarak moveTo() yöntemini çağırabilirsiniz. Bu, kalemin ucunu kağıttan kaldırıp yeni bir konuma taşımaya benzer.

Çizim noktası yerinde dururken, lineTo() (düz çizgi çizmek için) ve curveTo() (eğri çizgiler çizmek için) çizim yöntemlerine yapılan çağrılar dizisini kullanarak çizim yaparsınız.

Çizim yaparken, çizim yapmadan çizim noktasını yeni bir konuma taşımak için istediğiniz zaman moveTo() yöntemini çağırabilirsiniz.

Çizerken, belirli bir dolgu renginiz varsa, dolguyu endFill() yöntemini çağırarak kapatabilirsiniz. Kapalı bir şekil çizmediyseniz (başka bir deyişle, endFill() yöntemini çağırdığınız anda, çizim noktası şeklin başlangıç noktasında değilse), endFill() yöntemini çağırdığınızda, Flash çalışma zamanı geçerli çizim noktasından en son moveTo() çağrısında belirtilen konuma doğru düz bir çizgi çizerek otomatik olarak şekli kapatır. Bir dolgu başlattıysanız ve endFill() yöntemini çağırmadıysanız, beginFill() yöntemi (veya diğer dolgu yöntemlerinden biri) çağrıldığında, geçerli dolgu kapanır ve yeni bir dolgu başlatılır.

lineTo() yöntemini çağırdığınızda, Graphics nesnesi, geçerli çizim noktasından yöntem çağrısında iki parametre olarak belirttiğiniz koordinatlara, belirttiğiniz çizgi stiliyle düz bir çizgi çizer. Örneğin, bu kod satırı çizim noktasını 100, 100 noktasına yerleştirir ve sonra 200, 200 noktasına doğru bir çizgi çizer:

myShape.graphics.moveTo(100, 100); 
myShape.graphics.lineTo(200, 200);

Aşağıdaki örnek, 100 piksel yüksekliğinde kırmızı ve yeşil üçgen çizer:

var triangleHeight:uint = 100; 
var triangle:Shape = new Shape(); 
 
// red triangle, starting at point 0, 0 
triangle.graphics.beginFill(0xFF0000); 
triangle.graphics.moveTo(triangleHeight / 2, 0); 
triangle.graphics.lineTo(triangleHeight, triangleHeight); 
triangle.graphics.lineTo(0, triangleHeight); 
triangle.graphics.lineTo(triangleHeight / 2, 0); 
 
// green triangle, starting at point 200, 0 
triangle.graphics.beginFill(0x00FF00); 
triangle.graphics.moveTo(200 + triangleHeight / 2, 0); 
triangle.graphics.lineTo(200 + triangleHeight, triangleHeight); 
triangle.graphics.lineTo(200, triangleHeight); 
triangle.graphics.lineTo(200 + triangleHeight / 2, 0); 
 
this.addChild(triangle);

curveTo() yöntemi, quadratic Bézier eğrisi çizer. Bu, iki noktayı (tutturma noktaları olarak adlandırılır) birleştirip üçüncü bir noktaya (denetim noktası olarak adlandırılır) doğru eğerek bir yay çizer. Graphics nesnesi, birinci tutturma noktası olarak geçerli çizim konumunu kullanır. curveTo() yöntemini çağırdığınızda, dört parametre iletirsiniz: denetim noktasının x ve y koordinatları, ardından da ikinci tutturma noktasının x ve y koordinatları. Örneğin, aşağıdaki kod, 100, 100 noktasında başlayıp 200, 200 noktasında biten bir eğri çizer. Denetim noktası, 175, 125 noktasında bulunduğundan, bu biraz sağa ve aşağı doğru hareket eden bir eğri oluşturur:

myShape.graphics.moveTo(100, 100); 
myShape.graphics.curveTo(175, 125, 200, 200);

Aşağıdaki örnek, 100 piksel genişlik ve yükseklikte kırmızı ve yeşil dairesel nesneler çizer. quadratic Bézier eşitliğinin doğası gereği bunların mükemmel daireler olmadığını unutmayın:

var size:uint = 100; 
var roundObject:Shape = new Shape(); 
 
// red circular shape 
roundObject.graphics.beginFill(0xFF0000); 
roundObject.graphics.moveTo(size / 2, 0); 
roundObject.graphics.curveTo(size, 0, size, size / 2); 
roundObject.graphics.curveTo(size, size, size / 2, size); 
roundObject.graphics.curveTo(0, size, 0, size / 2); 
roundObject.graphics.curveTo(0, 0, size / 2, 0); 
 
// green circular shape 
roundObject.graphics.beginFill(0x00FF00); 
roundObject.graphics.moveTo(200 + size / 2, 0); 
roundObject.graphics.curveTo(200 + size, 0, 200 + size, size / 2); 
roundObject.graphics.curveTo(200 + size, size, 200 + size / 2, size); 
roundObject.graphics.curveTo(200, size, 200, size / 2); 
roundObject.graphics.curveTo(200, 0, 200 + size / 2, 0); 
 
this.addChild(roundObject);