只有一個圓角和漸變背景的VBox

我正在使用Flex 3.4 SDK。只有一個圓角和漸變背景的VBox

我試圖以編程方式（是的，必須是這種方式）風格/皮膚VBox，以便其右上角圓角，並且它獲得了兩個顏色漸變包圍。我

我發現周圍的修改實例能夠完成這兩種效應（角和背景），但只有分開：

VBox中，並不是所有的圓角：http://livedocs.adobe.com/flex/3/html/help.html?content=skinning_6.html

VBox中，漸變背景：http://butterfliesandbugs.wordpress.com/2007/06/08/generic-background-gradient-for-containers/

但我需要做的是同時應用兩者。迄今爲止，我所有的編碼嘗試都失敗了。

有人會知道如何正確地做這件事嗎？

來源

2009-10-05 camurgo

我在博客上有一篇關於如何製作這個確切組件Here的文章。

您創建一個基本的自定義MXML組件（在這種情況下擴展VBox）。您可以指定一個編程皮膚，這是斜角和漸變被應用的位置。

編程皮膚完成了它在updateDisplayList函數中的繪製。

下面是一些代碼（其餘是我的博客上，有一個演示）

var g:Graphics = graphics; 
    var cn:Number = this.getStyle("cornerRadius"); 
    var crtl:Number = this.getStyle("cornerRadiusTopLeft") > 0 ? this.getStyle("cornerRadiusTopLeft") : cn; 
    var crtr:Number = this.getStyle("cornerRadiusTopRight") > 0 ? this.getStyle("cornerRadiusTopRight") : cn; 
    var crbl:Number = this.getStyle("cornerRadiusBottomLeft") > 0 ? this.getStyle("cornerRadiusBottomLeft") : cn; 
    var crbr:Number = this.getStyle("cornerRadiusBottomRight") > 0 ? this.getStyle("cornerRadiusBottomRight") : cn; 
    var gradFrom:Number = this.getStyle("gradientFrom"); 
    var gradTo:Number = this.getStyle("gradientTo"); 

    var b:EdgeMetrics = borderMetrics; 
    var w:Number = unscaledWidth - b.left - b.right; 
    var h:Number = unscaledHeight - b.top - b.bottom; 
    var m:Matrix = verticalGradientMatrix(0, 0, w, h); 

    g.clear(); 
    g.beginGradientFill("linear", [gradFrom, gradTo], [1, 1], [0, 255], m); 
    g.lineStyle(1,borderColor,1,true,LineScaleMode.NORMAL,CapsStyle.ROUND,JointStyle.ROUND); 
    GraphicsUtil.drawRoundRectComplex(g, b.left, b.top, w, h, crtl, crtr, crbl, crbr); 
    g.endFill(); 
    }

的演示，看看Here。希望這可以幫助。

來源

2009-10-05 03:45:19

非常感謝您！ :)我從來沒有使用GraphicsUtil，似乎是什麼伎倆。 – camurgo 2009-10-05 18:45:54

您不需要GraphicsUtil類。「drawRoundRectComplex」是圖形對象的一個不良記錄功能。 http://livedocs.adobe.com/flex/3/html/help.html?content=Drawing_Vector_Graphics_5.html – Glenn 2009-10-05 19:41:10

好點 - 有時Adobe會提供太多的做事方法。這是我的一箇舊項目的一些代碼 - 我發誓我現在會更好了！ - Casp – 2009-10-05 20:22:43

請按照第二個鏈接中的步驟操作，但不要使用「drawRect」，您應該可以使用「drawRoundRectComplex」。雖然你可能需要玩一些矩陣設置。我似乎記得有一些問題。另一種選擇是使用degrafa。可以有一點學習曲線，但它很強大，可以做到這一點。

來源

2009-10-05 01:35:23 Glenn

我肯定會在這裏與degrafa一起 – 2009-10-05 01:46:12

謝謝，這似乎是關於它，類似於CapsNZ的解決方案。我知道有關降級問題。儘量讓事情變得簡單，我寧願不使用它。 – camurgo 2009-10-05 19:00:42

只有一個圓角和漸變背景的VBox

回答

相關問題