在 Flex 中，如何将图像放入 Canvas 而不溢出？答案

【问题标题】：In Flex, how do you put an Image inside a Canvas without it overflowing?在 Flex 中，如何将图像放入 Canvas 而不溢出？
【发布时间】：2010-11-19 05:01:47
【问题描述】：

我有一个嵌套在画布中的图像。

<mx:Canvas>
<mx:Image source="@Embed(source='assets/library.swf', symbol='Waves')" />
</mx:Canvas>

我希望图像不会溢出 Canvas 的边界。但是当我在画布上设置width 和height 时，我的图像消失了。 Canvas 似乎也不尊重horizontalScrollPolicy。

看起来很简单，但由于 Flex 的官方文档目前已失效，我想我会转向 SO。

【问题讨论】：

标签： apache-flex image layout canvas

【解决方案1】：

你的画布应该有一个宽度和一个高度，你可以使用 autoscale/maintainaspectratio 属性来调整图像的行为。

<mx:Canvas width="500" height="250"
        verticalScrollPolicy="off" horizontalScrollPolicy="off" 
        backgroundColor="#000000">

        <mx :Image id="theimage"
            maintainAspectRatio="true"
    scaleContent="true"
            width="500" height="250"
            source="your image" />
</mx:Canvas>

如果您希望图像居中，也可以查看此post。这比它应该的要复杂一些。

【讨论】：

【解决方案2】：

问题是我自己的错。我将剪辑的绘图参考点设置为大约舞台的高度，并将画布的高度设置为剪辑无标记的高度。

最后，在 Flash 中调整参考点并使用以下代码解决了它：

<mx:Canvas width="100%" height="200" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image source="@Embed(source='assets/library.swf', symbol='Waves')" />
</mx:Canvas>

不过，TheBrain 的回答通常是正确的。

【讨论】：