Flex的 - 简单的方法来设置边界图像

Question

有一种简单的方法来简单的边框添加到图像？

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

我使用的Spark Image。

谢谢！

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

这是我加入缩略图一个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文件中，我定义一组属性，以便于我能够将图像devide成组。如果我点击一个组的图片，我可以跳过该组中的下一个/上一个，但不会跳到下一个组。有没有什么办法，我插断行我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

火花图像是SkinnableComponent。

1. 您可以创建一个支持任何 方便的方式国界，像风格或属性自定义皮肤。
2. 或者你可以设置 皮肤，如果你想看到的边界或删除它，如果你不想
3. 或者你可以把它放在里面BorderContainer做，并设置borderVisible到 真的，当你想看到的边界。