Verlooplijnen en vullingen maken

Flash Player 9 of hoger, Adobe AIR 1.0 of hoger

Het object graphics kan ook streken en vullingen tekenen met verlopen in plaats van effen kleuren. Een verloopstreek wordt gemaakt met de methode lineGradientStyle() en een verloopvulling wordt gemaakt met de methode beginGradientFill().

Beide methoden accepteren dezelfde parameters. De eerste vier zijn vereist: type, colors, alphas en ratios. De overige vier zijn optioneel, maar wel handig voor verdere aanpassing.

  • De eerste parameter geeft het type verloop op dat u maakt. Acceptabele waarden zijn GradientType.LINEAR of GradientType.RADIAL.

  • De tweede parameter geeft de array van de kleuren op die moeten worden gebruikt. In een lineair verloop worden de kleuren van links naar rechts geplaatst. In een radiaal verloop worden ze van binnen naar buiten geplaatst. De volgorde van de kleuren van de array staat voor de volgorde waarin de kleuren in het verloop worden getekend.

  • De derde parameter geeft de alfatransparantiewaarden op van de bijbehorende kleuren in de vorige parameter.

  • De vierde parameter geeft de verhouding of de nadruk op die elke kleur binnen het verloop krijgt. Acceptabele waarden lopen van 0 tot en met 255. Deze waarden geven geen breedte of hoogte aan, maar de positie binnen het verloop; 0 staat voor het begin van het verloop, 255 staat voor het einde van het verloop. De array met verhoudingen moet opeenvolgend oplopen en hetzelfde aantal items met informatie hebben als de kleur- en alfa-arrays die in de tweede en derde parameters zijn opgegeven.

Hoewel de vijfde parameter, de transformatiematrix, optioneel is, wordt deze vaak gebruikt omdat het een eenvoudige en krachtige manier is om het uiterlijk van het verloop te regelen. Deze parameter accepteert een instantie Matrix. De eenvoudigste manier om een object Matrix voor een verloop te maken is om de methode createGradientBox() van de klasse Matrix te gebruiken.

Een object Matrix definiëren voor gebruik met een verloop

Gebruik de methoden beginGradientFill() en lineGradientStyle() van de klasse flash.display.Graphics om verlopen te definiëren die in vormen moeten worden gebruikt. Wanneer u een verloop definieert, geeft u een matrix op als een van de parameters van deze methoden.

De eenvoudigste manier om de matrix te definiëren is om de methode createGradientBox() van de klasse Matrix te gebruiken; hierbij wordt een matrix gemaakt die wordt gebruikt om het verloop te definiëren. U definieert de schaal, rotatie en positie van het verloop met de parameters die aan de methode createGradientBox() zijn doorgegeven. De methode createGradientBox() accepteert de volgende parameters:

  • Breedte verloopvak: de breedte (in pixels) waarover het verloop zich verspreidt.

  • Hoogte verloopvak: de hoogte (in pixels) waarover het verloop zich verspreidt.

  • Rotatie verloopvak: de rotatie (in radialen) die op het verloop moet worden toegepast.

  • Horizontale translatie: hoe ver (in pixels) het verloop horizontaal verschuift.

  • Verticale translatie: hoe ver (in pixels) het verloop verticaal verschuift.

Bekijk bijvoorbeeld een verloop met de volgende kenmerken:

  • GradientType.LINEAR

  • Twee kleuren, groen en blauw, met de array ratios ingesteld op [0, 255]

  • SpreadMethod.PAD

  • InterpolationMethod.LINEAR_RGB

In de volgende voorbeelden ziet u verlopen waarin de parameter rotation van de methode createGradientBox() afwijkt zoals aangegeven, maar alle andere instellingen hetzelfde blijven:

width = 100;

height = 100;

rotation = 0;

tx = 0;

ty = 0;

width = 100;

height = 100;

rotation = Math.PI/4; // 45°

tx = 0;

ty = 0;

width = 100;

height = 100;

rotation = Math.PI/2; // 90°

tx = 0;

ty = 0;

In de volgende voorbeelden worden het effect getoond op een groen naar blauw, lineair verloop waarin de parameters rotation, tx en ty van de methode createGradientBox() afwijken zoals aangegeven, maar alle andere instellingen hetzelfde blijven:

width = 50;

height = 100;

rotation = 0;

tx = 0;

ty = 0;

width = 50;

height = 100;

rotation = 0

tx = 50;

ty = 0;

width = 100;

height = 50;

rotation = Math.PI/2; // 90°

tx = 0;

ty = 0;

width = 100;

height = 50;

rotation = Math.PI/2; // 90°

tx = 0;

ty = 50;

De parameters width, height, tx en ty van de methode createGradientBox() hebben ook invloed op de grootte en positie van een verloopvulling radial, zoals u in het volgende voorbeeld ziet:

width = 50;

height = 100;

rotation = 0;

tx = 25;

ty = 0;

De volgende code produceert het laatste radiale verloop dat wordt weergegeven:

import flash.display.Shape; 
import flash.display.GradientType; 
import flash.geom.Matrix; 
 
var type:String = GradientType.RADIAL; 
var colors:Array = [0x00FF00, 0x000088]; 
var alphas:Array = [1, 1]; 
var ratios:Array = [0, 255]; 
var spreadMethod:String = SpreadMethod.PAD; 
var interp:String = InterpolationMethod.LINEAR_RGB; 
var focalPtRatio:Number = 0; 
 
var matrix:Matrix = new Matrix(); 
var boxWidth:Number = 50; 
var boxHeight:Number = 100; 
var boxRotation:Number = Math.PI/2; // 90° 
var tx:Number = 25; 
var ty:Number = 0; 
matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty); 
 
var square:Shape = new Shape; 
square.graphics.beginGradientFill(type,  
                            colors, 
                            alphas, 
                            ratios,  
                            matrix,  
                            spreadMethod,  
                            interp,  
                            focalPtRatio); 
square.graphics.drawRect(0, 0, 100, 100); 
addChild(square);

De breedte en hoogte van de verloopvulling wordt bepaald door de breedte en hoogte van de verloopmatrix in plaats van door de breedte of hoogte die met het object Graphics is getekend. Wanneer u met het object Graphics tekent, tekent u wat er bij die coördinaten in de verloopmatrix bestaat. Zelfs als u een van de methoden shape van een object Graphics gebruikt, zoals drawRect(), rekt het verloop niet uit tot de grootte van de vorm die wordt getekend; de grootte van het verloop moet in de verloopmatrix zelf worden opgegeven.

In het volgende voorbeeld ziet u het visuele verschil tussen de afmetingen van de verloopmatrix en de afmetingen van de tekening zelf.

var myShape:Shape = new Shape(); 
var gradientBoxMatrix:Matrix = new Matrix(); 
gradientBoxMatrix.createGradientBox(100, 40, 0, 0, 0); 
myShape.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix); 
myShape.graphics.drawRect(0, 0, 50, 40); 
myShape.graphics.drawRect(0, 50, 100, 40); 
myShape.graphics.drawRect(0, 100, 150, 40); 
myShape.graphics.endFill(); 
this.addChild(myShape);

Deze code tekent drie verlopen met dezelfde vullingstijl, die is opgegeven met een gelijke verdeling van rood, groen en blauw. De verlopen worden getekend met de methode drawRect() met pixelbreedten van respectievelijk 50, 100 en 150. De verloopmatrix die wordt opgegeven in de methode beginGradientFill() wordt gemaakt met een breedte van 100 pixels. Dit houdt in dat het eerste verloop slechts de helft van het verloopspectrum bevat, het tweede verloop alles bevat en het derde verloop alles bevat en daarbij 50 pixels blauw extra heeft die naar rechts uitwijken.

De methode lineGradientStyle() werkt net als beginGradientFill(), behalve dat niet alleen het verloop moet worden gedefinieerd, maar dat de dikte van de streek ook moet worden opgegeven met de methode lineStyle() voordat u begint met tekenen. De volgende code tekent een vak met een rode, groene en blauwe verloopstreek:

var myShape:Shape = new Shape(); 
var gradientBoxMatrix:Matrix = new Matrix(); 
gradientBoxMatrix.createGradientBox(200, 40, 0, 0, 0); 
myShape.graphics.lineStyle(5, 0); 
myShape.graphics.lineGradientStyle(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 255], gradientBoxMatrix); 
myShape.graphics.drawRect(0, 0, 200, 40); 
this.addChild(myShape);

Zie Matrix-objecten gebruiken voor meer informatie over de klasse Matrix