Skapa övertoningslinjer och fyllningar

Flash Player 9 och senare, Adobe AIR 1.0 och senare

Graphics-objektet kan även rita ramlinjer och fyllningar med övertoningar i stället för heltäckande färger. En övertoningslinje skapas med metoden lineGradientStyle() och en övertoningsfyllning skapas med metoden beginGradientFill() .

Båda metoderna tar samma parametrar. De första fyra är obligatoriska: type, colors, alphas och ratios. De resterande fyra är valfria och används för avancerad anpassning.

  • Den första parametern anger vilken typ av övertoning du skapar. Godtagbara värden är GradientType.LINEAR eller GradientType.RADIAL .

  • Den andra parametern anger den array med färgvärden som ska användas. I en linjär övertoning ordnas färgerna från vänster till höger. I en radiell övertoning ordnas färgerna inifrån och ut. Färgernas ordning i arrayen representerar den ordning som färgerna ritas i övertoningen.

  • Den tredje parametern anger alfagenomskinlighetsvärden för de motsvarande färgerna i den föregående parametern.

  • Den fjärde parametern anger förhållanden, eller hur stor vikt varje färg har i övertoningen. Giltiga värden är från 0 till 255. Värdena representerar inte bredd eller höjd utan placering i övertoningen. 0 är övertoningens början, 255 är övertoningens slut. Arrayen med förhållanden måste öka sekventiellt och ha samma antal värden som både färg- och alfaarrayerna som anges av den andra och tredje parametern.

Den femte parametern, omformningsmatrisen, är valfri, men den används ofta eftersom den är ett lätt och bra sätt att styra övertoningens utseende. Parametern tar en Matrix-instans. Det lättaste sättet att skapa ett Matrix-objekt för en övertoning är att använda metoden createGradientBox() i klassen Matrix.

Definiera ett Matrix-objekt att använda i en övertoning

Metoderna beginGradientFill() och lineGradientStyle() i klassen flash.display.Graphics används för att definiera övertoningar som ska användas i former. När du definierar en övertoning anger du en matris som en av parametrarna för dessa metoder.

Det lättaste sättet att definiera matrisen är att använda metoden createGradientBox() i klassen Matrix. Den skapar en matris som används för att definiera övertoningen. Övertoningens skala, rotation och position definieras med parametrarna som skickas till metoden createGradientBox() . Metoden createGradientBox() tar följande parametrar:

  • Övertoningsrutans bredd: den bredd i pixlar som övertoningen ska spridas till.

  • Övertoningsrutans höjd: den höjd (i pixlar) som övertoningen ska spridas till.

  • Övertoningsrutans rotation: den rotation (i radianer) som ska tillämpas på övertoningen.

  • Vågrät translatering: hur långt (i pixlar) som övertoningen ska flyttas vågrätt.

  • Lodrät translatering: hur långt (i pixlar) som övertoningen ska flyttas lodrätt.

Ta till exempel en övertoning med följande egenskaper:

  • GradientType.LINEAR

  • Två färger, grönt och blått, med arrayen ratios inställd på [0, 255]

  • SpreadMethod.PAD

  • InterpolationMethod.LINEAR_RGB

I följande exempel visas övertoningar där parametern rotation i metoden createGradientBox() är olika medan alla andra inställningar är desamma:

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;

I följande exempel visas effekterna på en linjär övertoning från grönt till blått där parametrarna rotation , tx och ty i metoden createGradientBox() är olika medan alla andra inställningar är desamma:

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;

Parametrarna width , height , tx och ty i metoden createGradientBox() påverkar även storleken och positionen för en radiell övertoningsfyllning, vilket visas i följande exempel:

width = 50;

height = 100;

rotation = 0;

tx = 25;

ty = 0;

Följande kod ger den sista radiella övertoningen som visas: 

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

Observera att övertoningsfyllningens bredd och höjd avgörs av övertoningsmatrisens bredd och höjd, inte av den bredd och höjd som ritas med Graphics-objektet. När du ritar med Graphics-objektet ritar du det som finns på de koordinaterna i övertoningsmatrisen. Även om du använder en av formmetoderna i ett Graphics-objekt som drawRect() sträcks inte övertoningen ut till samma storlek som formen som ritas. Övertoningens storlek måste anges i själva övertoningsmatrisen.

Nedan visas den visuella skillnaden mellan övertoningsmatrisens mått och ritåtgärdens mått: 

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

I den här koden ritas tre övertoningar med samma fyllningsformat, som anges med en jämn fördelning av rött, grönt och blått. Övertoningarna ritas med metoden drawRect() med pixelbredderna 50, 100 respektive 150. Övertoningsmatrisen som anges i metoden beginGradientFill() skapas med bredden 100 pixlar. Det innebär att den första övertoningen bara omfattar hälften av övertoningsspektrat, den andra omfattar hela och den tredje omfattar hela och har ytterligare 50 pixlar som är helt blå till höger.

Metoden lineGradientStyle() fungerar på ungefär samma sätt som beginGradientFill() , förutom att du (utöver att definiera övertoningen) måste ange tjocklek för ramlinjen med lineStyle() innan du börjar rita. I följande kod ritas en ruta med en röd, grön och blå övertoningslinje: 

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

Mer information om klassen Matrix finns i Använda Matrix-objekt .