mouseOver 和 mouseOut 在改变大小的画布上

Question

我正在用 MXML 构建一个具有不同状态的图形组件，每个状态都有自己的大小。

我有一个“正常”状态和一个“高亮状态”，高亮状态具有更高的高度。

在这个组件上，我实现了一个函数，可以在每个 mouseOver 和 mouseOut 上执行，以从正常状态变为突出显示状态并返回。

我的问题是，在高亮模式下，mouseout事件是根据正常状态的大小触发的。

代码如下：

<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:mx="library://ns.adobe.com/flex/mx"
       xmlns:controller="com.*"

       mouseOver="mouseOverHandler(event)" mouseOut="mouseOutHandler(event)"
       width="230" height.Playing="40" height.Normal="21" height.Highlighted="40">
<mx:states>
    <mx:State name="Normal" />
    <mx:State name="Playing" />
    <mx:State name="Highlighted" />
</mx:states>
<mx:Button includeIn="Highlighted" left="19" bottom="2" width="15" height="15" />
</mx:Canvas>

我使用 mouseOuver 和 mouseOut 的方式有问题吗？

谢谢，

亚历山大

Answer 1

我正在构建一个图形组件 MXML 具有不同的状态，每个 状态有自己的大小。

您对 Flex 组件架构的工作方式存在误解。组件永远不会自行调整大小。总是由父母来决定它的孩子的大小。你可以重写measure方法来设置measuredWidth和measuredHeight；然而，这些只是提供给组件父级的建议。由组件决定是否接受它们。

因此，在您的示例中，您可以更改按钮（子按钮）的高度/宽度；但你不能改变画布的高度/宽度（你正在扩展的组件）并期望它坚持。

没有看到包含此​​画布组件的代码，很难确定发生了什么。但是，在这种情况下，您应该重写 measure 方法来更改measuredWidth/measuredHeight。像这样的：

override protected measure():void{
 if(currentState=='Normal'){
  measuredWidth = 0;
  measuredHeight = 0;
 } else {
  measuredWidth = button.width;
  measuredHeight = button.height;
 }
}

当状态改变时，一定要调用 invalidateSize() 方法。您可以通过收听currentStateChange 事件来做到这一点。

理论上，这会导致组件改变measuredWidth/measuredHeight；这将迫使父级也重新绘制自身，以适应新的测量宽度/测量高度。

MXML 掩盖了很多这些细节。