彎曲的狗耳效應？

Question

我以前使用過graphics包，但不確定是否可以完成。我試圖用flex編程創建一個狗耳朵效果。可以做到嗎？如果不可能，我還有其他選項或庫。

Answer 1

你可以逃脫的無證drawRoundRectComplex（）爲一個時髦的圓角版本：

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

這是從工具面板的矩形原始工具的ActionScript版本。

當然，您可以像@ Robusto建議的那樣，在Graphics類中找到自己的頭。 同時，這裏是一個簡單的45角度的版本：

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

這裏的粗糙（45角形）版本應該什麼樣子：

更新： 過幾分鐘玩這個，下面是一些舍入版本的代碼，用於記錄：

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

使用軟陰影，看起來不錯：

您可以填寫一個不錯的線性漸變的角落裏，你可以修改功能，使您可以選擇邊角圓潤，並且都沒有，離散動畫吧，等有樂趣！

我現在明白狗耳朵，只是想知道折角處發生了什麼：P

Answer 2

你可以使用圖形對象來做一個簡單的版本。

首先，在容器的頂角繪製一個黑色方形矩形。然後從黑色矩形的左上角開始繪製一個帶白色背景的實心三角形+ 1，moveTo黑色矩形的左下角+ 1，moveTo矩形左側+矩形寬度，最後返回到您開始的位置。

瞭解圖形類here。