在Flex中，如何将图像放置在Canvas内而不会溢出？

Question

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

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

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

看起来很容易，但是由于目前Flex的官方文档已经停刊，我认为我应该转向SO。

Answer 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>

如果您想将图片居中，也可以查看此信息 。 这比应该的要棘手得多。

Answer 2

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

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

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

不过，大脑的答案通常是正确的。