apache-flex - 无法访问 htmlText 中的嵌入图像

Question

图片可以包含在 TextArea使用 htmlText 的控件属性(property):

ta.htmlText = '<img src="http://..."/>';

我该怎么办 引用嵌入图像 ?

一个例子:

<mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            [Embed(source='../assets/img.gif')]
            public var img:Class;
        ]]>
    </mx:Script>
    <mx:htmlText>
        <![CDATA[
            <img src="???" />
        ]]>
    </mx:htmlText>
</mx:TextArea>

更新:

<img src='../assets/img.gif />

在本地机器上工作，但在服务器环境中它抛出:

错误 #2044:未处理的 IOErrorEvent:。文本=错误 #2035:未找到 URL。

我怎样才能解决这个问题？

Answer 1

好的，我刚刚花了几个小时来解决这个问题，但我已经让它在 Flash 和 Flex 中工作了。

在 TextField 中显示图像

您可以将 DisplayObjects 加载到 TextField <img />标签包括 MovieClips、Sprites 和嵌入的图像。

在 Flash 或 Flex 中，如果您想显示嵌入的图像，则必须创建一个包装类来扩展 DisplayObject类(例如 Sprite 或 MovieClip)。

确保您的文本字段足够大以包含图像。在测试过程中，当我真的让 TextField 太小而无法显示整个图像时，我认为事情不起作用。

闪存示例

简单的例子，所有代码都在主时间线上。

在舞台上创建一个动态的 TextField。给它一个有用的名字，我叫我的txtImageTest .

调整大小 txtImageTest到合适的尺寸，例如300x150 像素。

创建一个新的 MovieClip 元件并为其指定一个类名，例如imageClip1 .

在您的新剪辑中绘制一些内容或将嵌入的图像放入 imageClip1 .

返回主时间线，取消选择所有对象并在第一帧上打开 Actionscript 编辑器。

在文本字段上打开多行和自动换行:

imageClip1.wordWrap = true;
imageClip1.multiline = true;
imageClip1.htmlText = "<p>You can include an image in your HTML text with the &lt;img&gt; tag.</p><p><img id='testImage' src='imageClip1' align='left' width='30' height='30' hspace='10' vspace='10'/>Here is text that follows the image. I'm extending the text by lengthening this sentence until it's long enough to show wrapping around the bottom of the image.</p>"

保存并测试您的电影。

弹性示例

由于我们不能像在 Flash 中那样在库中创建新的 MovieClip，因此我们需要创建一个执行相同任务的新类(如果您想在库中创建新剪辑，此方法也适用于 Flash) .

这是我的黑色三角形子弹类，称为 BlackArrow.as:

// Set the correct package for you class here.
package embed
{
    import flash.display.Sprite;
    import mx.core.BitmapAsset;

    public class BlackArrow extends Sprite
    {
        // Embed the image you want to display here.
        [Embed(source='assets/embed/triangleIcon_black.png')]
        [Bindable]
        private var TriangleImage:Class;

        public function BlackArrow()
        {
            super();

            // Instantiate the embedded image and add it to your display list.
            var image:BitmapAsset = new TriangleImage();
            addChild(image);
        }

    }
}

注意:做 不是 扩展 Bitmap(在 Flash 中)或 BitmapAsset(在 Flex 中)，因为它们在 TextField 中没有正确缩放或定位。选择 Sprite 或类似的东西。

这是在 TextField 中显示此图像的类的示例:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
    width="100%" height="100%">

    <mx:Script>
    <![CDATA[
        import embed.BlackArrow;

        // You must include a variable declaration of the same type as your
        // wrapper class, otherwise the class won't be compiled into
        // the SWF and you will get an IOError.
        private var img2:BlackArrow;
    ]]>
    </mx:Script>

    <mx:Text id="txtResults1" width="100%" height="100%">
        <mx:htmlText>
        <![CDATA[<p>You can include an image in your HTML text with the &lt;img&gt; tag.</p><p><img id='testImage' src='embed.BlackArrow' align='left' hspace='10' vspace='10'/>Here is text that follows the image. I'm extending the text by lengthening this sentence until it's long enough to show wrapping around the bottom of the image.</p>]]>
        </mx:htmlText>
    </mx:Text>

 </mx:VBox>

请注意，我在 src 中使用了完全限定的类名。图片标签的属性。

最后的笔记

图像与文本字段的左侧或右侧对齐，由 align 决定图片标签的属性。这意味着您不能在不直接访问图像的情况下将图像放置在文本中间。

图像标签支持的属性列表在这里:
http://blog.coursevector.com/notes-htmltext

TextField LiveDoc 页面在这里:
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/TextField.html

getImageReference()函数是获取文本字段中图像引用所需的功能:
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/TextField.html#getImageReference%28%29

确保在 src 中使用完全限定的类名属性。

确保声明包装类的变量以确保将其编译到 SWF 中。