Flex 3 - 更改框边框颜色答案

【问题标题】：Flex 3 - Change box border colorsFlex 3 - 更改框边框颜色
【发布时间】：2011-03-27 06:29:02
【问题描述】：

我有一个看似“基本”的问题，但我就是不知道该怎么做……

我有一个盒子，我想更改边框颜色。直到那里，没有什么特别的。只是一个 box.bordercolor = xxxxxx...

但是，我希望顶部和底部边框使用一种颜色，左右边框使用另一种颜色......这就是我被卡住的部分。

有什么建议吗？有什么建议吗？

感谢您的帮助和时间！ ;)

问候， BS_C3

@Senz

嗨！不幸的是，如果不让它“难以理解”，我将无法分享代码......

但这就是想法...我们有两个主要组件：ArrowButton 和 Navigator。

ArrowButton 是一个包含标签和图像的 hbox（此图像是箭头提示，它会根据 ArrowButton 的状态而变化）。

Navigator 是一个包含一系列 ArrowButton 的 hbox。 ArrowButton 与右侧的 arrowButton 重叠，以创建按钮的尖端。

然后您只需围绕这些组件创建一大堆功能。

我希望这会有所帮助...如果您还有其他问题，请不要犹豫 =)

问候。

【问题讨论】：

标签： apache-flex colors containers border

【解决方案1】：

我很确定您将不得不创建一个borderSkin 来完成此操作。我相信这些是在外部程序中创建的，例如 Flash Professional；但是more info is in the docs。

【讨论】：

【解决方案2】：

我不认为 Flex 在上/下边框和左/右边框之间有任何区别。创建皮肤肯定是一种非常巧妙的方法。一种编程方式可能是使用 box.graphics 手动绘制边框。我首先尝试覆盖 updateDisplayList() 函数来绘制边框...

【讨论】：

嗨！谢谢你们的回答。但是，如何使用 box.graphics 绘制边框？我一直在研究它，但并不真正明白。我发现了这个：livedocs.adobe.com/flex/3/html/… 但仍然...... @____@ 如果你能启发我，那就太好了 =P

【解决方案3】：

我注意到您询问的是 Flex 3 SDK。皮肤是一个很好的方法。它们在 Flex 4 中有所改变（为了更好的恕我直言）。如果您想使用 Flex 绘图 API，只需将 Box 类扩展为一个自定义类，如下所示：

public class MultiColorBorderBox extends Box
    {
                // You could add getters/setters or constructor parameters to be able to change these values.
            private var topColor:uint   = 0xFF0000;
            private var rightColor:uint = 0x00FF00;
            private var bottomColor:uint = 0x0000FF;
            private var leftColor:uint = 0xFF00FF;
            private var borderWidth:Number = 20;


        public function MultiColorBorderBox()
        {
            super();

        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            // This just ensures you dont have content under your border
            this.setStyle("paddingLeft", borderWidth);
            this.setStyle("paddingRight", borderWidth);
            this.setStyle("paddingTop", borderWidth);
            this.setStyle("paddingBottom", borderWidth);

            var g:Graphics = this.graphics;  // This creates a new Graphics object and sets it to the MultiColorBorderBox graphics object.  Since Box (superclass) descends from a Sprite object, it has a graphics object automatically.

            g.clear();
            g.moveTo(0,0);  // Moves the position to the top left corner
            g.lineStyle(borderWidth, topColor); // Sets the line style with the width and color
            g.lineTo(unscaledWidth, 0); // Draws the top border from top left to top right corners
            g.lineStyle(borderWidth, rightColor); // Changes the line style
            g.lineTo(unscaledWidth, unscaledHeight); // Draws the line from top right to bottom right
            g.lineStyle(borderWidth, bottomColor); //Changes the bottom border style
            g.lineTo(0, unscaledHeight); // Draws the line from bottom right to bottom left
            g.lineStyle(borderWidth, leftColor); // Changes the border color
            g.lineTo(0,0); // Closes the box by drawing from bottom left to top left            

        }

【讨论】：

【解决方案4】：

我终于做了一件非常简单的事情。我想我对规格的描述不够详细。

实际目的是创建一个带有箭头形按钮的导航器。每个按钮在被选中时都必须突出显示。 this http://www.freeimagehosting.net/uploads/bcd0d762d7.jpg 是导航器的样子。

每个按钮实际上是一个 HBox，包含一个 Box（带标签）和一个 Image（用于箭头），horizontalGap = 0。

我没有考虑在按钮上添加一个发光滤镜。所以我试图改变盒子顶部和底部的颜色......

所以，按钮中的发光滤镜效果很好。

抱歉没有对上下文进行解释>_

问候。

【讨论】：