1

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

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

我正在使用 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 中跳过一行的方法 :)

谢谢！

4

2 回答 2

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 " />
于 2013-04-25T08:43:52.220 回答
0

Spark 图像是一个SkinnableComponent.

  1. 您可以以任何方便的方式创建支持边框的自定义皮肤，例如样式或属性。
  2. 或者，如果你想看到边框，你可以设置该皮肤，如果你不想要，可以删除它
  3. 或者你可以把它放在里面BorderContainer，borderVisible当你想看边框的时候设置为true。
于 2013-04-24T14:34:11.983 回答