Flex中文字与图片同时显示

最新推荐文章于 2022-04-15 23:21:11 发布
最新推荐文章于 2022-04-15 23:21:11 发布
阅读量324 收藏
点赞数
分类专栏： flex 文章标签： 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吧。不知谁有更好的方法可以分享一下。

 

iteye_13785
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp [全端兼容] - 最新详细实现发送emoji表情包及自定义图片图标小表情功能，支持文字与表情混合显示或光标处插表情，安卓苹果手机显示无差异，类似QQ微信聊天框弹出左右滑动选择表情发送显示
王佳斌
08-24 4127
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，表情，emoji，图片表情包，带表情图片输入框，emoji表情，文字穿插表情消息处理，表情包发送显示，详细使用emoji表情包，在输入框中发送及显示emoji表情，类似微信聊天的小表情，支持文字与表情混合在一起，emoji表情插件，聊天发表情，如何使用图片替代，图标表情，图片表情，安卓苹果ios多端通用，显示乱码，表情是灰色没有颜色，用不了兼容不行，怎么存入数据库，表情必须放到服务器上吗，显示有问题，
flex 文件上传 预览下载 及中文名乱码解决问题
09-26
例如，图片文件可以直接使用`Image`组件显示；文本文件可以读取内容并显示在`Label`或`TextArea`中；PDF等文档则可能需要借助第三方库，如PDF.js，将其转换为HTML5 Canvas进行预览。处理中文文件名时，需确保读取...
文字环绕图片的布局效果(使用动态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布局之文字加图片
AdolfQiu的博客
10-22 1780
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
使用flex图文混排
hanker的博客
06-27 1436
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 641
效果图如下：
html flex标签转行,html – 为什么Flex容器中的元素保持在同一行？
weixin_34791959的博客
07-01 494
flex容器的初始设置是flex-wrap：nowrap.这意味着弹性物品被迫保持在一条线上.您可以使用flex-wrap：wrap覆盖默认值.在flex布局中忽略flex项目的显示值.一个flex容器,它是一个显示元素：flex或display：inline-flex,建立了一个flex formatting context.尽管与block formatting context类似,但存在差异...
actionscript3 FLEX显示MovieClip, sprite, 文字等demo源代码.zip
01-21
值得注意的是，当`embedFonts`属性设为`false`时，嵌入的字体不会被使用，这可能导致在某些情况下无法正确显示特定的中文字体，如`如何在AS3中使用嵌入字体 当testText的embedFonts属性为false时，嵌入的中文字体不...
FlexBuilder+3+中文教程
09-02
通过这个中文教程，开发者将能够逐步掌握FlexBuilder 3的使用，熟练地创建和部署富互联网应用程序，同时也能深入理解Flex的开发理念和实践技巧。无论是初学者还是有一定基础的开发者，都能从中获益。
鼠标悬停九宫格图片高亮显示
06-04
标题中的“鼠标悬停九宫格图片高亮显示”是一个常见的网页交互效果，通常用于提升用户体验，让用户在浏览图片网格时能清晰地看到当前选中的图片。这种效果可以通过JavaScript（JS）和CSS来实现，而标签中的“源码...
Flex3 中 实现 图文混排
06-13
完美解决Flex3 中 实现 图文混排 。
图片与文字排版-flex
titoni_yunruohan的博客
10-31 860
情景：你的文字用了span标签，你的图片用了img标签，此时你需要的排版并不是默认情况的，接下来怎么办（ 默认情况已经在上一篇博客展示请查看） 文字左边且与上边距对齐                                                                   效果图                                              ...
flex布局的详细使用，文字加图片
qq_41121649的博客
04-06 3966
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 4378
.header{ display:flex; align-items:center; image{ flex-shrink: 0; } p{ flex: 1; display: flex; flex-direction: column; } } 内容超出容器 大致情况是：在一个设置了display:flex布局的大容器A中并排放置两个子容器，并且子容器设置flex:1，子容器中都有一个元素包含一段文本，这段文本设置了不换行并且显示省略号的样式，当文本过长的时候，子容器会被撑开，如下效果： ...
【我不知道的css】巧用flex:0实现上方图片下方文字效果
laplacepoisson的博客
04-15 3926
【我不知道的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 2121
利用flex布局实现图片轮播图的效果
利用flex实现图文混排
hanker的博客
12-26 2141
&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="
图片和文字垂直居中-flex布局
热门推荐
baozhuona的博客
11-16 1万+
因为float和position用的比较熟，所以flex只是了解了一下，基本不用。但是今天发现了flex在处理图片和文字对齐方便真是超爽der~ 1.需求 就是一个盒子里面，图片和文字垂直居中 2.惯用套路 我之前的解决思路都是给图片设margin，给文字设line-height, 为了适配单位一般都不是px,用百分比设置，基本都是靠调试效果调出来的，非常不
flex 布局下图片和文字水平对齐的实现
积跬步至千里
02-19 6383
flex 布局下图片和文字水平对齐的实现 代码如下： html： &lt;div class="wrap"&gt; &lt;div class="img-div"&gt;&lt;img class="img-class" src=""&gt;&lt;/div&gt; &lt;div class="text-div"
Flex实现图片轮播与自动切换的步骤与代码
- `movea()`：当用户触发事件（可能是鼠标移动）时，播放下一张图片（adout2），同时暂停当前显示的图片（adout），并将步进值设置为1。 - `moveb()`：同理，当触发事件时，将上一张图片adout2暂停，播放adin，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值