Flex中文字与图片同时显示

最新推荐文章于 2024-06-12 14:19:48 发布
最新推荐文章于 2024-06-12 14:19:48 发布 · 373 阅读 · 0
文章标签：

#Flex #Adobe #XML

前几天流浪的孩子（网名）问我flex里怎么解决文字与图片同时出现时的现实问题。我使用的方法是flex中iframe的形式。不过他找到了一种更好一点的方法，就是不知道怎么实现，找我想想办法。
主要的思路是：先计算出整个句子的长度,然后计算需要几个Hbox,然后在对每个hbox分别处理,将image放在合适的位置

进入页面

代码如下


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
        
        <mx:Script>
                <![CDATA[
                        import mx.controls.Image;
                        import mx.containers.HBox;
                        import mx.controls.Text;
                        import mx.controls.Alert;
                        
                        [Bindable]
                        private var ImgList:Array = [
                {label: "astonish.gif", data: "[astonish.gif]"},{label: "biggrin.gif", data: "[biggrin.gif]"},
                {label: "cool.gif", data: "[cool.gif]"},{label: "happy.gif", data: "[happy.gif]"},
                {label: "lol.gif", data: "[lol.gif]"},{label: "mad.gif", data: "[mad.gif]"},
                {label: "rage.gif", data: "[rage.gif]"},{label: "sad.gif", data: "[sad.gif]"},
                {label: "sheepish.gif", data: "[sheepish.gif]"},{label: "shocked.gif", data: "[shocked.gif]"},
                {label: "sleep.gif", data: "[sleep.gif]"},{label: "smile.gif", data: "[smile.gif]"},
                {label: "tongue.gif", data: "[tongue.gif]"},{label: "wink.gif", data: "[wink.gif]"},
                {label: "wronged.gif", data: "[wronged.gif]"}
                ];
                        
                        private function sub():void
                        {
                                
                                var newTxt:Object = content.addChild(VboxImg(text.htmlText));
                        }
                        
                        private function VboxImg(string:String):VBox
                        {
                                var result:VBox = new VBox();
                                if(string.indexOf("</TEXTFORMAT>") != -1)
                                {
                                        result.addChild(HboxImg(string.substring(0,string.indexOf("</TEXTFORMAT>")+13)));
                                        string = string.substring(string.indexOf("</TEXTFORMAT>")+String("</TEXTFORMAT>").length,string.length)
                                        var newTxt_R:Object = result.addChild(VboxImg(string));
                                }else{
                                        result.addChild(HboxImg(string))
                                }
                                return result;
                        }
                        
                        private function HboxImg(string:String):HBox
                        {
                                var result:HBox = new HBox();
                                if(string.indexOf("[") != -1)
                                {
                                        var tempstr:String = string.substring(string.indexOf("["),string.indexOf("]")+1);
                                        //Alert.show(tempstr);
                                        for(var i:Number =0 ;i< ImgList.length;i++)
                                        {
                                                if(tempstr == ImgList[i].data)
                                                {        
                                                        var newTxt_L:Object = result.addChild(new Text());
                                                                newTxt_L.htmlText = string.substring(0,string.indexOf(ImgList[i].data));
                                                        var Img:Object = result.addChild(new Image());
                                                                Img.source = "./smilies/"+ImgList[i].label;
                                                        string = string.substring(string.indexOf(ImgList[i].data)+String(ImgList[i].data).length,string.length)
                                                        var newTxt_R:Object = result.addChild(HboxImg(string));
                                                }
                                        }
                                }else{
                                        var newTxt:Object = result.addChild(new Text());
                                                newTxt.htmlText = string;
                                }
                                return result;
                        }
                        
                        private function addImage():void
                        {
                                text.text += imagelist.selectedItem.data;
                        }
                ]]>
        </mx:Script>
        
        <mx:VBox id="content" height="200" width="100%" backgroundColor="#FFFFFF" />
        <mx:HBox width="100%">
                <mx:TextArea id="text" width="80%" height="150" />
                <mx:VBox>
                        <mx:TileList dataProvider="{ImgList}" change="addImage()" id="imagelist">
                                <mx:itemRenderer>
                                        <mx:Component>
                                                <mx:Image source="./smilies/{data.label}" width="20" height="20" />
                                        </mx:Component>
                                </mx:itemRenderer>
                        </mx:TileList>
                        <mx:Button label="sub" click="sub()" />
                </mx:VBox>
        </mx:HBox>
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
        
        <mx:Script>
                <![CDATA[
                        import mx.controls.Image;
                        import mx.containers.HBox;
                        import mx.controls.Text;
                        import mx.controls.Alert;
                        
                        [Bindable]
                        private var ImgList:Array = [
                {label: "astonish.gif", data: "[astonish.gif]"},{label: "biggrin.gif", data: "[biggrin.gif]"},
                {label: "cool.gif", data: "[cool.gif]"},{label: "happy.gif", data: "[happy.gif]"},
                {label: "lol.gif", data: "[lol.gif]"},{label: "mad.gif", data: "[mad.gif]"},
                {label: "rage.gif", data: "[rage.gif]"},{label: "sad.gif", data: "[sad.gif]"},
                {label: "sheepish.gif", data: "[sheepish.gif]"},{label: "shocked.gif", data: "[shocked.gif]"},
                {label: "sleep.gif", data: "[sleep.gif]"},{label: "smile.gif", data: "[smile.gif]"},
                {label: "tongue.gif", data: "[tongue.gif]"},{label: "wink.gif", data: "[wink.gif]"},
                {label: "wronged.gif", data: "[wronged.gif]"}
                ];
                        
                        private function sub():void
                        {
                                
                                var newTxt:Object = content.addChild(newLine(text.text));
                        }
                        
                        private function newLine(string:String):VBox
                        {
                                var result:VBox = new VBox();
                                if(string.length >= 80)
                                {
                                        result.addChild(VboxImg(string.substring(0,80)));
                                        Alert.show(string.substring(0,80));
                                        string = string.substring(80,string.length)
                                        Alert.show(string);
                                        var newTxt_R:Object = result.addChild(newLine(string));
                                }else{
                                        result.addChild(VboxImg(string))
                                }
                                return result;
                        }
                        
                        private function VboxImg(string:String):VBox
                        {
                                var result:VBox = new VBox();
                                if(string.indexOf("</TEXTFORMAT>") != -1)
                                {
                                        result.addChild(HboxImg(string.substring(0,string.indexOf("</TEXTFORMAT>")+13)));
                                        string = string.substring(string.indexOf("</TEXTFORMAT>")+String("</TEXTFORMAT>").length,string.length)
                                        var newTxt_R:Object = result.addChild(VboxImg(string));
                                }else{
                                        result.addChild(HboxImg(string))
                                }
                                return result;
                        }
                        
                        private function HboxImg(string:String):HBox
                        {
                                var result:HBox = new HBox();
                                if(string.indexOf("[") != -1)
                                {
                                        var tempstr:String = string.substring(string.indexOf("["),string.indexOf("]")+1);
                                        //Alert.show(tempstr);
                                        for(var i:Number =0 ;i< ImgList.length;i++)
                                        {
                                                if(tempstr == ImgList[i].data)
                                                {        
                                                        var newTxt_L:Object = result.addChild(new Text());
                                                                newTxt_L.htmlText = string.substring(0,string.indexOf(ImgList[i].data));
                                                        var Img:Object = result.addChild(new Image());
                                                                Img.source = "./smilies/"+ImgList[i].label;
                                                        string = string.substring(string.indexOf(ImgList[i].data)+String(ImgList[i].data).length,string.length)
                                                        var newTxt_R:Object = result.addChild(HboxImg(string));
                                                }
                                        }
                                }else{
                                        var newTxt:Object = result.addChild(new Text());
                                                newTxt.htmlText = string;
                                }
                                return result;
                        }
                        
                        private function addImage():void
                        {
                                text.text += imagelist.selectedItem.data;
                        }
                        
                        private function addBr():void
                        {
                        }
                ]]>
        </mx:Script>
        
        <mx:VBox id="content" height="200" width="100%" backgroundColor="#FFFFFF" />
        <mx:HBox width="100%">
                <mx:TextArea id="text" width="80%" height="150" />
                <mx:VBox>
                        <mx:TileList dataProvider="{ImgList}" change="addImage()" id="imagelist">
                                <mx:itemRenderer>
                                        <mx:Component>
                                                <mx:Image source="./smilies/{data.label}" width="20" height="20" />
                                        </mx:Component>
                                </mx:itemRenderer>
                        </mx:TileList>
                        <mx:Button label="sub" click="sub()" />
                </mx:VBox>
        </mx:HBox>
</mx:Application>

由于加了一个新的函数：文字达到一定长度后自动换行，发现这个函数原来的函数有一个冲突。输入时的换行功能需要使用htmlText，而长度控制的函数需要调用text，又需要将两者结合使用，计算就相当复杂。随后想通过输入框来调整，发现特许textarea没有enter这一函数，点击回车（enter），textarea会自动生成html的代码。
暂时没有想到好的办法解决这个问题，可能需要自己做一个组件来替换textarea吧。不知谁有更好的方法可以分享一下。

 

Flex3 中 实现 图文混排
06-13
完美解决Flex3 中 实现 图文混排 。
actionscript3 FLEX显示MovieClip, sprite, 文字等demo源代码.zip
01-21
值得注意的是，当`embedFonts`属性设为`false`时，嵌入的字体不会被使用，这可能导致在某些情况下无法正确显示特定的中文字体，如`如何在AS3中使用嵌入字体 当testText的embedFonts属性为false时，嵌入的中文字体不...
flex布局之文字加图片
AdolfQiu的博客
10-22 1967
flex两个概念：flex container 、flex items flex container指的是父容器，flex items指的是子容器。 flex布局的主轴和交叉轴 flex布局中没有x、y轴，flex布局中只有main axis（主轴），cross axis（交叉轴）。 flex container和flex items的属性 flex container flex items flex-flow flex flex-direction flex-grow
文字环绕图片的布局效果(使用动态div实现)
12-12
CSS的float属性，有left，right。 那么，如果我想让图片浮在中间呢？有没有float:middle呢？ 貌似是没有勒。 最新的CSS3的分栏属性（http://www.w3.org/TR/css3-multicol/）可以让文字分栏，然后再让图片左浮右浮，以此来实现图片在中间的“假象”。 如何实现“文字环绕图片”的霸道效果呢？！！（虽然感觉很2，没有哪个UI设计师会这样设计一个网页。但是觉得这种排版好有趣哦~） 答案就是，用动态div啦~ 把文字分成4块，环绕着图片。图片的大小和div的大小事先规定。再用js来计算每个div里显示多少文字。 这样，即使只有左浮右浮，也可以实现文字
使用flex图文混排
hanker的博客
06-27 1529
ps:全部在谷歌浏览器中测试经典的图文混排<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scal
利用flex定位图片和文字的居中排布
oleiwoaboluo的博客
10-09 724
效果图如下：
在同一个label部件内同时显示文字和图片
最新发布
08-29
首先，用户的问题是：“我想查找在同一个label部件内同时显示文字和图片的方法 请问如何在同一个label部件内同时显示文字和图片”。这是一个关于在同一个Label部件中同时显示文本和图片的查询。 现在，我需要参考...
Flex图表导出为图片功能实现详解
综上所述，“Flex图表导出图片”是一项融合了图形渲染、二进制处理与用户交互的综合性技术方案，充分体现了Flex平台在企业级数据可视化应用中的灵活性与扩展能力。虽然随着HTML5技术的发展，Flex逐渐被现代前端框架...
Flex3学习教程：实例代码与图片详解
以上知识点详细介绍了Flex 3学习教程中的关键内容，包括MXML、ActionScript 3.0、Flex组件和布局、样式与主题、数据服务与通信、模块化与构建工具以及调试和性能优化等。通过这些内容，读者可以快速地掌握Flex 3的...
ArcGis_Flex中文版完整手册与资源分享
综上所述，将ArcGIS与Flex结合，并提供一个中文版的帮助文档（CHM格式），可以更好地帮助中文用户理解和掌握如何使用ArcGIS Flex应用程序来完成具体的GIS任务。这不仅包括技术的操作指南，也包括了如何根据实际需求...
html flex标签转行,html – 为什么Flex容器中的元素保持在同一行？
weixin_34791959的博客
07-01 569
flex容器的初始设置是flex-wrap：nowrap.这意味着弹性物品被迫保持在一条线上.您可以使用flex-wrap：wrap覆盖默认值.在flex布局中忽略flex项目的显示值.一个flex容器,它是一个显示元素：flex或display：inline-flex,建立了一个flex formatting context.尽管与block formatting context类似,但存在差异...
每日小技巧：使用的flex布局时文字换行情况
Cy01234的博客
06-12 1423
很多小伙伴在写代码时可能都会有这样的一个烦恼，在屏幕尺寸进行缩放时或者在不同的手机屏幕尺寸不同时，使用的flex布局时文字有可能会掉下来。这时就有了这样的一个方法，flex-shrink。
flex布局的详细使用，文字加图片
qq_41121649的博客
04-06 4478
flex两个概念：flex container 、flex items flex container指的是父容器，flex items指的是子容器。 flex布局的主轴和交叉轴 flex布局中没有x、y轴，flex布局中只有main axis（主轴），cross axis（交叉轴）。 flex container和flex items的属性 flex container flex it...
一张图片与多行文字并排（css）
weixin_47119307的博客
05-20 4628
.header{ display:flex; align-items:center; image{ flex-shrink: 0; } p{ flex: 1; display: flex; flex-direction: column; } } 内容超出容器 大致情况是：在一个设置了display:flex布局的大容器A中并排放置两个子容器，并且子容器设置flex:1，子容器中都有一个元素包含一段文本，这段文本设置了不换行并且显示省略号的样式，当文本过长的时候，子容器会被撑开，如下效果： ...
图片与文字排版-flex
titoni_yunruohan的博客
10-31 930
情景：你的文字用了span标签，你的图片用了img标签，此时你需要的排版并不是默认情况的，接下来怎么办（ 默认情况已经在上一篇博客展示请查看） 文字左边且与上边距对齐                                                                   效果图                                              ...
利用flex实现图文混排
hanker的博客
12-26 2223
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;meta name="viewport" content="
【我不知道的css】巧用flex:0实现上方图片下方文字效果
laplacepoisson的博客
04-15 4443
【我不知道的css】巧用flex:0实现上方图片下方文字效果要求代码原理 要求 要求使用flex布局实现下图所示的效果，容器内部左边为图片和文字，图片在上，文字在下，图片大小不一，文字长度不一，但要求文字根据图片的宽度自动换行。 代码 <div class="container"> <div class="wrapper"> <img src="./images/1.jpg" alt="" width="200"> <p>这是一段文字这
用flex布局实现图片轮播
A_Common_Man的博客
03-14 2489
利用flex布局实现图片轮播图的效果
flex技术-在图片上添加文字
w_y_loong的专栏
11-11 1342
private static var format1:TextFormat = new TextFormat(null,16,"0xff0000");//添加到图片上文字的格式 /**                  * 在图片上添加文字                  */                  public static function setTextToImag
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值