Question

最近我发现了一个不错的在线图表工具 - LovelyCharts。我喜欢UI的设计方式 - 您可以查看屏幕截图here。我想知道如何制作跨越多个组件的图像，例如屏幕截图右上角的LovelyCharts徽标。有人能把我踢向正确的方向吗？

Answer 1

您需要创建具有透明背景的图像。 JPEG格式不支持透明背景，因此您需要使用GIF或其他格式。然后按以下代码嵌入图像。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical">
    <mx:Canvas width="476"
               height="264">
        <mx:Label x="103"
                  y="110"
                  text="Some text"
                  width="155"/>
        <mx:Image x="115"
                  y="110"
                  width="100"
                  height="100"
                  source="@Embed('assets/transparent_back.gif')"/>
    </mx:Canvas>

您可以将图像放在画布上所需的位置，如果愿意，可以重叠其他组件。以下是具有透明背景的图像http://commons.wikimedia.org/wiki/File:Gluecksklee_%28transparent_background%29.gif

的示例

Answer 2

这绝对适合你。应用程序的布局是绝对的，有两个图像示例 - 一个在canvas标签内声明，另一个在

之外

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute">
    <mx:Canvas width="476"
               height="264"
               x="50"
               y="0"
               borderStyle="solid"
               borderThickness="5"
               borderColor="black">
        <mx:Label x="103"
                  y="110"
                  text="Some text"
                  width="155"/>
        <mx:Image x="115"
                  y="110"
                  width="100"
                  height="100"
                  source="@Embed('assets/transparent_back.gif')"/>
    </mx:Canvas>
    <mx:Image x="30"
              y="110"
              width="100"
              height="100"
              source="@Embed('assets/transparent_back.gif')"/>

</mx:Application>

使图像跨越Flex中的多个组件

2 个答案: