Drawing API in Flash CS3 e ActionScript 3: JointStyle e CapsStyle (Augitaly blog: il sito per i fan di Adobe)

Drawing API in Flash CS3 e ActionScript 3: JointStyle e CapsStyle

In questo esempio in Actionscript 3 scriveremo una funzione, drawShape(), che sfrutta le Drawing API per creare due linee che formano un angolo retto.
Tali linee possono avere caratteristiche differenti a seconda delle proprietà impostate: oltre a colore e dimensione, è possibile visualizzare in modo differente sia i punti di collegamento tra le linee che le loro estremità, utilizzando le proprietà JointStyle e CapsStyle del metodo lineStyle() - classe flash.display.Graphics - e creando degli angoli più o meno morbidi.

Inseriamo il seguente codice nel primo frame di un nuovo Flash File (ActionScript 3.0)

1) Innanzitutto, importiamo le classi necessarie al funzionamento dello script

import flash.display.CapsStyle;
import flash.display.JointStyle;
import flash.display.LineScaleMode;
import flash.display.Shape;
import flash.geom.Rectangle;

2) Definiamo le proprietà delle linee, che utilizzeremo successivamente nella funzione drawShape()

var color:uint = 0xFF0044;
var lineWidth:Number = 20;
var lineAlpha:Number = 1.0;
var pixelHinting:Boolean = true;
var scaleMode:String = LineScaleMode.NONE;
var side:Number = 100;
var thickness:Number = 20;

3) La funzione drawShape() si occuperà di disegnare materialmente le linee sullo Stage, utilizzando i metodi lineStyle() e addChild(). Maggiori informazioni su questi argomenti sono reperibili nella documentazione ufficiale: lineStyle() – addChild()

function drawShape(x:Number, y:Number, joint:String, caps:String) {

var linee:Shape = new Shape();
linee.graphics.lineStyle(thickness, color, lineAlpha, pixelHinting, "", caps, joint);
linee.graphics.moveTo(x, y);
linee.graphics.lineTo(x, y + side);
linee.graphics.lineTo(x + side, y + side);
addChild(linee);

showLabel(x, y, joint, caps)

}

4)Visualizziamo un testo descrittivo sotto ogni Shape per visualizzare le proprietà JointStyle e CapsStyle utilizzate.

function showLabel(x:Number, y:Number, joint:String, caps:String) {

var label:TextField = new TextField();
label.multiline = true;
label.text = "JointStyle: " + joint + "\n" +
"CapsStyle: " + caps;
label.x = x;
label.y = y+side+20;

var format:TextFormat = new TextFormat();
format.font = "Verdana";
format.color = 0xFF0000;
format.size = 10;
format.underline = true;
label.defaultTextFormat = format;
addChild(label);

}

6) Disegnamo tre Shape con posizioni x,y e proprietà JointStyle e CapsStyle differenti

drawShape(50, 50, JointStyle.MITER, CapsStyle.ROUND )
drawShape(200, 50, JointStyle.ROUND, CapsStyle.ROUND)
drawShape(350, 50, JointStyle.BEVEL, CapsStyle.SQUARE)