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

Question

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

我想要一个特定的工具提示"图标"。我读过关于使用HTML、rollOver和rollOut的文章(例如，谢谢，先生(，但我正在将其构建为一个更大的文本块的一部分；很难从增量对象切换到在中间的HTML。

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

干杯

Answer 1

我刚刚遇到了同样的问题。

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

LinkElement已分派鼠标事件。

Answer 2

问题(我相信您已经发现(是文本流元素不是显示对象，因此无法实现正常的显示对象行为。

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

通过查看LinkElement的源代码，您可以看到如何添加鼠标交互的一个很好的例子(请参阅createContentElement函数(。

不幸的是，InlineGraphicElement被标记为final，因此您需要复制它的功能，而不是扩展它。只需确保在代码中使用自定义图形元素来代替普通图形元素。

祝你好运！

编辑

万一失去了重点，我们的想法是，您可以通过将侦听器附加到textFlow来捕获应用程序中某个地方的鼠标事件，然后使用标准方法在元素上以编程方式创建和定位工具提示，以找到文本流元素的边界。

Answer 3

当鼠标悬停在textflow组件上时，可以进行一些命中测试。

假设你有这样的文本流：

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

并且您监听整个文本组件上的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');
    }
}