Question

我有一个Image对象，当图像加载时，它会被调整为容器大小它将加载的图像是动态的大小，所以在调整大小后我最终会看到图像对象的白色背景显示的条子。

如何使Image对象不具有白色背景并且是透明的 PNG的部分具有透明部分，但由于物体的白色背景被加载，因此显示为白色。

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" headerHeight="20" >

  <mx:Script>
    <![CDATA[
      public function set source( val:String ):void{
        this.img.source = val;
      }
      private function onLoad( e:Event ):void{
        // resize image on load to fit
        var scale:Number = (this.height - 38) / this.img.contentHeight; // 38 is adjustment for headheight and padding
        this.img.scaleX = scale;
        this.img.scaleY = scale;
      }
    ]]> 
  </mx:Script>

  <!-- how do I make this image object have a transparent background -->
  <mx:Image id="img" complete="onLoad(event)" />

</mx:Panel>

[编辑] 在屏幕截图中可见的是由我在上面发布的代码制作的2个对象如您所见，有一个白色边框 enter image description here

这是巴布亚新几内亚之一这个png有一个透明的1英寸边框，350 @ PPI，这是72 PPI所以稍微小一点您无法在此处看到边框，但如果您将其拖到桌面并在photoshop中打开，您将会看到它 enter image description here

[编辑]
正如SuperSaiyen建议我在面板中添加了backgroundColor =“＃000000”，我得到了这个结果。如你所见，我现在有一个黑色边框 enter image description here

所以我继续将backgroundAlpha =“0”和backgroundColor =“＃000000”添加到面板中并得到了这个。
enter image description here
所以现在我几乎拥有它，但它周围仍然有蓝色。它还不是100％透明我真的不知道为什么面板背景会改变图像标签我想父母的某种遗产正在继续还是需要摆脱蓝色。

Answer 1

不要设置比例，请尝试以下方法：

<mx:Image id="img" height="{this.height-38}" maintainAspectRatio="true" />

我试图重新创建你的问题，即使是我没有看到白色边框的比例。 enter image description here

我有黑色边框，因为这是面板的背景......

<mx:Panel id="thePanel" headerHeight="20"
              horizontalAlign="center" verticalAlign="middle"
              height="200" width="150"
              backgroundColor="#000000">

        <!-- how do I make this image object have a transparent background -->
        <mx:Image id="img" height="{thePanel.height-38}" maintainAspectRatio="true" />

    </mx:Panel>

编辑：所以你看到的背景是面板后面的框背景，而不是图像（参见面板上的opaqueBackground prop）。您想要的是将面板的背景设置为与面板边框相同的颜色。面板是否适合使用？那个带角落的HBox怎么样？

<mx:VBox id="thePanel" cornerRadius="4" backgroundColor="0xd1dbe9"
             horizontalAlign="center" verticalAlign="middle"
             height="200" width="150"
             paddingBottom="5" paddingLeft="5" paddingTop="5">
        <mx:Label text="Bind to title String" />
        <mx:Image id="img" width="100%" height="100%"/>
    </mx:VBox>

enter image description here

图象对象白色背景陈列

1 个答案: