Effet d'oreille de chien en flexion?

Question

J'ai déjà utilisé le package graphics, mais je ne sais pas si cela est possible. J'essaie de créer un effet d'oreille de chien par programmation avec flex. Peut-il être fait? Si ce n'est pas possible, quelles autres options ou bibliothèques ai-je?

Answer 1

Vous pouvez sortir avec l'drawRoundRectComplex() sans papier pour une version des coins arrondis à la mode:

graphics.drawRoundRectComplex(x, y, width, height, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius); 

Il est la version actionscript des outils primitifs Rectangle du panneau Outils.

Vous pouvez certainement vous faire une idée de la classe Graphics, comme l'a suggéré @Robusto. En attendant, voici simple 45 coudés:

var dogEars:Sprite = getDogEars45(200,100,15,0x009900,0x007700); 
dogEars.x = dogEars.y = 50; 
addChild(dogEars); 


function getDogEars45(width:Number,height:Number,cornerSize:Number,baseFill:Number,highlightFill:Number):Sprite{ 
    var rect:Sprite = new Sprite(); 
    var base:Shape = new Shape(); 
    base.graphics.beginFill(baseFill); 
    base.graphics.lineTo(width-cornerSize,0); 
    base.graphics.lineTo(width,cornerSize); 
    base.graphics.lineTo(width,height); 
    base.graphics.lineTo(0,height); 
    base.graphics.lineTo(0,0); 
    rect.addChild(base); 
    var corner:Shape = new Shape(); 
    corner.graphics.beginFill(highlightFill); 
    corner.graphics.lineTo(cornerSize,cornerSize); 
    corner.graphics.lineTo(0,cornerSize); 
    corner.graphics.lineTo(0,0); 
    corner.graphics.endFill(); 
    rect.addChild(corner); 
    corner.x = width-cornerSize; 
    return rect; 
} 

Voilà comment l'état brut (45 angle) version devrait ressembler à:

Mise à jour: eu quelques minutes pour jouer avec ce , voici un code pour les versions arrondies, pour documenter:

var dogEarsRounded:Sprite = getFlippedCornerRect(200,150,25,0x009900,0x00CC00); 
dogEarsRounded.x = dogEarsRounded.y = 150; 
addChild(dogEarsRounded); 

var dogEarsRounded2:Sprite = getFlippedCornerRoundedRect(200,150,15,35,0x990000,0xCC0000); 
dogEarsRounded2.x = dogEarsRounded2.y = 200; 
addChild(dogEarsRounded2); 

var dropShadow:DropShadowFilter = new DropShadowFilter(2,30,0,.5,2,2); 
dogEarsRounded.filters = dogEarsRounded2.filters = [dropShadow]; 

function getFlippedCornerRect(width:Number,height:Number,cornerSize:Number,mainFill:int,cornerFill:int):Sprite{ 
    var result:Sprite = new Sprite(); 
    var topRight:Shape = new Shape(); 
    topRight.graphics.beginFill(mainFill); 
    topRight.graphics.lineTo(width-cornerSize,0); 
    topRight.graphics.lineTo(width,cornerSize); 
    topRight.graphics.lineTo(width,height); 
    topRight.graphics.lineTo(0,height); 
    topRight.graphics.lineTo(0,0); 
    topRight.graphics.endFill(); 
    result.addChild(topRight); 
    var corner:Shape = new Shape(); 
    corner.graphics.beginFill(cornerFill); 
    corner.graphics.curveTo(0,cornerSize,cornerSize,cornerSize); 
    corner.graphics.lineTo(0,0); 
    corner.graphics.endFill(); 
    result.addChild(corner); 
    corner.x = width-cornerSize; 
    return result; 
} 

function getFlippedCornerRoundedRect(width:Number,height:Number,rectRadius:Number,cornerSize:Number,mainFill:int,cornerFill:int):Sprite{ 
    var result:Sprite = new Sprite(); 
    var topRight:Shape = new Shape(); 
    var hw:Number = width * .5; 
    var hh:Number = height* .5; 
    topRight.graphics.beginFill(mainFill); 
    topRight.graphics.lineTo(hw-cornerSize,0); 
    topRight.graphics.lineTo(hw,cornerSize); 
    topRight.graphics.lineTo(hw,hw); 
    topRight.graphics.lineTo(0,hw); 
    topRight.graphics.lineTo(0,0); 
    topRight.graphics.endFill(); 
    topRight.x = hw; 
    result.addChild(topRight); 
    var corner:Shape = new Shape(); 
    corner.graphics.beginFill(cornerFill); 
    corner.graphics.curveTo(0,cornerSize,cornerSize,cornerSize); 
    corner.graphics.lineTo(0,0); 
    corner.graphics.endFill(); 
    result.addChild(corner); 
    corner.x = width-cornerSize; 
    var topLeft:Shape = new Shape(); 
    topLeft.graphics.beginFill(mainFill); 
    topLeft.graphics.drawRoundRectComplex(0, 0, hw, hh, rectRadius, 0,0,0); 
    topLeft.graphics.endFill(); 
    result.addChild(topLeft); 
    var bottomLeft:Shape = new Shape(); 
    bottomLeft.graphics.beginFill(mainFill); 
    bottomLeft.graphics.drawRoundRectComplex(0, 0, hw, hh, 0, 0,rectRadius,0); 
    bottomLeft.graphics.endFill(); 
    bottomLeft.y = hh; 
    result.addChild(bottomLeft); 
    var bottomRight:Shape = new Shape(); 
    bottomRight.graphics.beginFill(mainFill); 
    bottomRight.graphics.drawRoundRectComplex(0, 0, hw, hh, 0, 0,0,rectRadius); 
    bottomRight.graphics.endFill(); 
    bottomRight.x = hw; 
    bottomRight.y = hh; 
    result.addChild(bottomRight); 
    return result; 
} 

Avec une ombre portée douce, Tout semble correct:

Vous pouvez remplir le coin avec un joli dégradé linéaire, vous pouvez modifier la fonction de sorte que vous pouvez choisir les angles sont arrondis, et qui ne sont pas, animer il discrètement, etc. Avez amusement!

Je comprends maintenant les oreilles de chien, je me demandais juste ce qui est arrivé au coin plié: P

Answer 2

Vous pouvez faire une version simple de ceci en utilisant l'objet graphique. Commencez par dessiner un rectangle carré sombre dans le coin supérieur de votre conteneur. Ensuite, dessinez un triangle rempli d'un fond blanc en commençant par le coin supérieur gauche de votre rectangle sombre + 1, déplacez-vous en bas à gauche de votre rectangle sombre + 1, déplacez-le vers rectangle gauche + rectangle largeur et enfin retournez à l'endroit où vous avez commencé.

En savoir plus sur la classe Graphics here.