Flex - 在图像上设置边框的简单方法

Question

有没有一种简单的方法可以为图像添加简单的边框？

我正在加载图像缩略图，并希望在运行时添加边框，而不必编辑所有缩略图。

我正在使用 Spark Image。

谢谢！

编辑： 我需要在这些拇指周围添加一个 1 像素的白色边框。我将 tumbs 的大小设置为 90x90，以使其适合水平或垂直，但我示例中的实际图像缩小到 90x51（这不是固定的，最大只有 90x90 是固定的）

这是我将 thumbNails 添加到 TileGroup 的代码（从 xml 文件加载图库）：

private function loadPopUpThumbs():void{
            if(curThumbImg <= totThumbImg){
                var thumbImg:Image = new Image();
                var _loader:Loader = new Loader();
                var imageNr:int = curThumbImg;
                var thumbContainer:BorderContainer = new BorderContainer();

                _loader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e:Event):void{ 
                    thumbImg.source = e.currentTarget.content;
                    popUpImgGroup.addElement(thumbImg);

                    thumbImg.width = 90;
                    thumbImg.height = 90;
                    thumbImg.scaleMode = "letterbox";
                    thumbImg.verticalAlign = "bottom";
                    thumbImg.smooth = true;
                    thumbImg.id = "thumbImg" + imageNr;

                    //thumbImg.drawRoundRect(0,0,thumbImg.width,thumbImg.height, null, 0xffffff);

                    thumbImg.addEventListener(MouseEvent.CLICK, function(evt:MouseEvent):void{
                        popUpThumbClicked(imageNr.toString());
                    });

                    trace("Thumb added: " + popUpXMLList.(attribute('nr')==imageNr.toString()).@thumbURL);
                    curThumbImg++;
                    loadPopUpThumbs();
                });

                _loader.load(new URLRequest(encodeURI(popUpXMLList.(attribute('nr')==imageNr.toString()).@thumbURL)));

            }else{
                trace("DONE Adding thubs!!!");
            }
        }

另外：是否可以在添加到 TileGroup 的项目中添加换行符？ 在我的 XML 文件中，我定义了一个组属性，以便能够将图像分成组。如果我单击一个组中的图像，我可以跳过该组中的下一个/上一个，但不能跳到下一个组。有什么方法可以在我的 TileGroup 中插入换行符，以便我可以在 prevGroup != curGroup 时进行监听，然后在继续添加下一个拇指之前添加某种间距？我所需要的只是一种在 tileGroup 中跳过一行的方法 :)

谢谢！

Answer 1

您可以创建新的自定义图像类，扩展火花图像。非常简单干净。并使用 css 设置边框大小和颜色。见例子：

package classes
{
    import flash.display.CapsStyle;
    import flash.display.JointStyle;
    import flash.display.LineScaleMode;

    import spark.components.Image;

    public class ImageBorder extends Image
    {

        public function ImageBorder()
        {
            super();
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight); 

            if (imageDisplay && imageDisplay.bitmapData)
            {
                var borderSize:Number   = getStyle("borderSize") || 0;
                var borderColor:Number  = getStyle("borderColor") || 0xffffff;

                var half:Number = borderSize/2;
                imageDisplay.left = imageDisplay.top = imageDisplay.right =  imageDisplay.bottom = borderSize;

                graphics.clear();
                graphics.lineStyle(borderSize, borderColor, 1, false, LineScaleMode.NONE, CapsStyle.NONE, JointStyle.MITER);

                graphics.moveTo(0, half);
                graphics.lineTo(unscaledWidth -half, half);
                graphics.lineTo(unscaledWidth - half, unscaledHeight-half);
                graphics.lineTo(half, unscaledHeight-half);
                graphics.lineTo(half, half);

            }
        }
    }
}

在应用程序中与 css 一起使用：

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
    @namespace classes "classes.*";

    classes|ImageBorder 
    {
        borderSize : 10;
        borderColor : "0xff00ff";
    }

</fx:Style>

<classes:ImageBorder source=" your source url " />

Answer 2

Spark 图像是SkinnableComponent。

1. 您可以创建支持任何边框的自定义皮肤 方便的方式，例如样式或属性。
2. 或者您可以设置 皮肤，如果你想看到边框或删除它，如果你不想要
3. 或者你可以把它放在BorderContainer里面，然后设置borderVisible为 当您想查看边框时为 true。