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文件中，我已经定义了一个组属性，因此我可以将图像分组。如果我单击一个组中的图像，我可以跳过该组中的next / prev，但不能跳到下一组。有没有办法让我在我的TileGroup中插入换行符，以便我可以在prevGroup！= curGroup时收听，然后在继续添加下一个拇指之前添加某种间距？我只需要一种跳过tileGroup中一行的方法：）

谢谢！

Answer 1

您可以创建新的自定义图像类，扩展spark图像。非常简单干净。并用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。

您可以创建支持任何边框的自定义外观方便的方式，如样式或属性。
或者你可以设置它皮肤如果你想看到边框或如果你不想要删除它
或者您可以将其放在BorderContainer内，并将borderVisible设置为如果您想看到边框，则为true。

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

2 个答案: