Disegno di linee e curve

Per disegnare con la proprietà graphics di un'istanza Shape, Sprite o MovieClip, occorre definire innanzi tutto lo stile (dimensioni e colore della linea, colore del riempimento) da usare nel disegno. Come accade quando si utilizzano gli strumenti di disegno in Adobe® Flash® Professional o in un altro programma di illustrazione, quando utilizzate ActionScript per disegnare potete utilizzare o meno un tratto o un colore di riempimento. L'aspetto del tratto viene specificato mediante il metodo lineStyle() o lineGradientStyle() . Per creare una linea uniforme, utilizzate il metodo lineStyle() . Quando si chiama questo metodo, i valori più comuni da specificare sono i primi tre parametri: spessore della linea, colore e alfa. Ad esempio, la riga di codice seguente indica all'istanza Shape di nome myShape di disegnare linee che sono spesse 2 pixel, sono di colore rosso (0x990000) e hanno il 75% di opacità:

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

Il valore predefinito per il parametro alfa è 1.0 (100%), pertanto è possibile lasciarlo disattivato se si desidera una linea completamente opaca. Il metodo lineStyle() accetta anche due parametri aggiuntivi per l'approssimazione pixel e la modalità scala; per ulteriori informazioni sull'uso di questi parametri, vedete la descrizione del metodo Graphics.lineStyle() nella Guida di riferimento di Adobe ActionScript 3.0 per la piattaforma Adobe Flash .

Per creare una linea sfumata, utilizzate il metodo lineGradientStyle() . Questo metodo viene descritto in Creazione di linee sfumate e riempimenti con gradiente .

Se desiderate creare una forma piena, chiamate il metodo beginFill() , beginGradientFill() , beginBitmapFill() o beginShaderFill() prima di iniziare a disegnare. Il più semplice di questi metodi, denominato beginFill() , accetta due parametri: il colore di riempimento e, facoltativamente, un valore alfa per il colore di riempimento. Ad esempio, se desiderate disegnare una forma con un riempimento uniforme verde, utilizzate il codice seguente (l'esempio presuppone che si stia disegnando su un oggetto di nome myShape ):

myShape.graphics.beginFill(0x00FF00);

Quando chiamate un metodo di riempimento, prima di cominciare un nuovo riempimento viene implicitamente terminato qualunque eventuale riempimento precedente. Quando chiamate un metodo che specifica uno stile del tratto, il tratto precedente viene sostituito ma il riempimento specificato in precedenza non viene alterato, e viceversa.

Una volta specificati lo stile della linea e le proprietà del riempimento, è necessario determinare il punto iniziale del disegno. L'istanza Graphics ha un punto di disegno, simile alla punta di una penna su un foglio di carta. Il punto (qualsiasi) in cui si trova il punto di disegno indica dove comincerà la successiva azione di disegno. Inizialmente, un oggetto Graphics comincia con il punto di disegno in corrispondenza del punto 0,0 nello spazio delle coordinate dell'oggetto su cui sta disegnando. Per cominciare a disegnare in un punto diverso, prima di chiamare uno dei metodi di disegno, chiamate il metodo moveTo() . Si tratta di un'operazione del tutto analoga a sollevare la punta della penna e spostarla in un altro punto.

Con il punto di disegno in posizione, disegnate mediante una serie di chiamate ai metodi di disegno lineTo() (per le linee rette) e curveTo() (per le linee curve).

Durante l'operazione di disegno, se avete specificato un colore di riempimento, potete chiudere il riempimento chiamando il metodo endFill() . Se non avete disegnato una forma chiusa (in altre parole, se al momento della chiamata a endFill() il punto di disegno non si trova nel punto iniziale della forma), quando chiamate il metodo endFill() il runtime Flash chiude automaticamente la forma disegnando una linea retta dal punto di disegno corrente alla posizione specificata dalla chiamata più recente a moveTo() . Se avete iniziato un riempimento e non avete chiamato il metodo endFill() , chiamando beginFill() (o uno degli altri metodi di riempimento) il riempimento corrente viene chiuso e ne viene cominciato uno nuovo.

Quando chiamate il metodo lineTo() , l'oggetto Graphics disegna una linea retta dal punto di disegno corrente in corrispondenza delle coordinate specificate come due parametri nella chiamata al metodo, utilizzando lo stile di linea specificato. Ad esempio, la riga di codice seguente posiziona il punto di disegno in corrispondenza del punto 100, 100 e disegna una linea fino al punto 200, 200:

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

L'esempio seguente disegna triangoli rossi e verdi con un'altezza di 100 pixel:

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);

Il metodo curveTo() disegna una curva Bézier quadratica. Viene disegnato un arco che collega due punti (definiti punti di ancoraggio) piegandosi verso un terzo punto (definito punto di controllo). L'oggetto Graphics utilizza la posizione di disegno corrente come primo punto di ancoraggio. Quando chiamate il metodo curveTo() , dovete passare quattro parametri: le coordinate x e y del punto di controllo, seguite dalle coordinate x e y del secondo punto di ancoraggio. Ad esempio, il codice seguente disegna una curva che inizia nel punto 100, 100 e termina nel punto 200, 200. Dal momento che il punto di controllo si trova nel punto 175, 125, si ottiene una curva che si sposta verso destra e successivamente verso il basso:

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

L'esempio seguente disegna degli oggetti circolari rossi e verdi con una larghezza e un'altezza di 100 pixel. Notate che a causa della natura dell'equazione quadratica di Bézier, non si tratta di cerchi perfetti:

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);