Flex 调整 Canvas 的大小在哪里放置这样的代码？ （内图）

Posted 2023-02-23

【中文标题】Flex 调整 Canvas 的大小在哪里放置这样的代码？ （内图）

【英文标题】：Flex resizing Canvas where to put such code ? (diagram inside)

【发布时间】：2010-10-27 22:20:45

【问题描述】：

我有两个 Canvas A 和 B，A 是 B 的孩子。 可以通过一些用户操作来调整 A 的大小，例如将一些 UI 组件添加到其基础。 A 由另一个父画布 B 界定，如果其子 A 变得太大，则该画布 B 应显示 scolling 句柄。

我希望 A 的宽度和高度与 B 相同（或非常接近），而 A 的计算宽度和高度小于 B。

如果 A 的 w 或 h 大于 B 的 w 或 h，则 A 应该增长并且 B 将显示滚动。 我希望它有点清楚。

我的问题是我在哪里以及如何做这样的逻辑？

canvas diagram http://www.picimg.com/uploads/18cd2277adde7d50da2bc708075f4fac.png

【参考方案1】：

Canvas 继承的 UIComponent 类具有 minHeight 和 minWidth 属性。您可以将 A 的 minHeight/Width 绑定到 B 的宽度和高度，因此每当调整 B 的大小时，A 的最小尺寸也会发生变化。还支持绑定到表达式（参见下面的示例）。当 A 变得太大而无法一次显示时， B 将自动显示滚动条，您只需要提供固定的高度和宽度（或其他一些尺寸限制）。添加子项后，A 也会自动调整大小。

<mx:Canvas id="B"  >
    <mx:Canvas id="A" minHeight="B.height-20" minWidth="B.width-20">
        <!-- your content widgets -->
    </mx:Canvas>
</mx:Canvas>

【参考方案2】：

您只需将 B 上的滚动策略设置为自动。这样，如果 A get 太大，B 就会有滚动条。这应该在 MXML 中完成。

<mx:Canvas name="B" width=100 height=100 scrollPolicy="auto">
    <mx:Canvas name="A" width=90 height=90>
        ...
    </mx:Canvas>
</mx:Canvas>

【讨论】：

滚动策略默认为自动。