在Flex 4.5中,如何使用ActionScript(而不是MXML)将工具提示添加到TextFlow(TLF)中的InlineGraphicElement?

时间:2011-05-27 18:38:09

标签: flex tooltip tlf

var newParagraph : ParagraphElement = new ParagraphElement();

var icon : InlineGraphicElement = MY_ICON;
//   icon.toolTip = "boo"  ????
newParagraph.addChild( icon );

我想要一个特定的工具提示“icon”。我已经阅读了有关使用HTML和rollOver以及rollOut(例如Thanks, Mister)的内容,但我将其构建为更大的文本块的一部分;在中间很难从增量对象切换到HTML。

如果我无法在图标上设置事件,我可以在ActionScript中创建一个HTML位作为段落的一部分(但不是全部)吗?

干杯

3 个答案:

答案 0 :(得分:2)

我刚遇到同样的问题。

我发现最简单的解决方案是将我的InlineGraphicElement包装在LinkElement中。

LinkElement已经调度了鼠标事件。

答案 1 :(得分:1)

问题(我确定你发现了)是文本流元素不是显示对象,因此不实现正常的显示对象行为。

您需要做的是创建一个自定义的InlineGraphicElement,它附加您需要的事件侦听器,然后从textFlow实例调度一个事件,以便可以在显示对象层次结构中的某个位置读取它(或者您选择的任何方法都是定位该事件。)

您可以通过查看LinkElement的源来查看如何添加鼠标交互的一个很好的示例(请参阅createContentElement函数)。

不幸的是InlineGraphicElement被标记为final,所以你需要复制它的功能而不是扩展它。只需确保在代码中使用自定义图形元素代替正常图形元素。

祝你好运!

修改

万一这一点丢失了,我们的想法是你可以通过将一个监听器附加到textFlow来捕获应用程序中某处的鼠标事件,然后使用标准方法以编程方式创建工具提示并将其放置在元素上文本流元素的边界。

答案 2 :(得分:1)

当鼠标悬停在文本流组件上时,您可以进行一些命中测试。

假设您有一些像这样的文本流:

<s:RichEditableText width="100%" height="100%" mouseOver="toggleTooltip()">
    <s:textFlow>
        <s:TextFlow>
            <s:p>
                <s:span>Some text before</s:span>
                <s:img id="myImg" source="myImg.png" />
                <s:span>Some text after</s:span>
            </s:p>
        </s:TextFlow>
    </s:textFlow>
</s:RichEditableText>

您在整个textcomponent上监听mouseOver事件。

然后测试鼠标是否在你的图像上,实现mouseOver处理程序:

private function toggleTooltip():void {
    var graphic:DisplayObject = myImg.graphic;
    var anchor:Point = graphic.localToGlobal(new Point(0, 0));

    if (mouseX >= anchor.x && mouseX <= anchor.x + graphic.width &&
        mouseY >= anchor.y && mouseY <= anchor.y + graphic.height) 
    {
        trace('show tooltip');
    }
    else {
        trace('hide tooltip');
    }
}