Flex 图文混排
Flex的图文混排应用确实困扰了很多人,特别是像我这种,项目建立在了Flex SDK3的基础上,又要实现图文混排功能的人(“悲剧” 引用一下我可爱的同事的口头禅)。
在网上搜索了很久,有人用SDK3实现了图文混排功能(而且也是开源的,
,支持!)。但是细看了一下他的源码。觉得不是很爽。
(PS:本观点只代表作者个人看法,与 FlexHome 无关。)至于不爽的原因是,我看到的那个实现图文混排的仁兄,使用的是自适应HBox与VBox嵌套,如果出现大量内容的图文混排,效率不敢想象。因为本身这种容器的嵌套就会影响程序的效率,再加上‘大量’两个字的话…
像下面这种代码,千万千万千万别出现:
<mx:Panel> <mx:VBox> <mx:HBox> <mx:Label text="Label 1" /> <mx:VBox> <mx:Label text="Label 2" /> </mx:VBox> <mx:HBox> <mx:Label text="Label 3" /> <mx:VBox> <mx:Label text="Label 4" /> </mx:VBox> </mx:HBox> </mx:HBox> </mx:VBox> </mx:Panel>
嗯嗯,以上说道的仁兄,别生气,我的这个应用可能也不会好到哪去,说是说图文混排,其实叫自适应控件比较合适点,但是里面没有出现一个HBox或者VBox,目前父层是使用Canvas,字符串是用Text显示,图片用Image,可自己进行扩展!我的项目里面就有MC替代了Image,欢迎批斗…
文章最尾附带了一个Demo,Demo里面实现了图文混排,至于分辨字符和图片的关键字,Demo里面写死了以\src=图片\进行表示,大家可以根据自己需要,将这部分再进行细分,做成属性也行,接口也罢,爱咋弄就咋弄,例如做成
<img src='图片'/> 哇靠,就是HTML代码啦! ![]()
下面简单说下原理:传一串字符进入MyCanvasArea控件,MyCanvasArea进行分类,分成字符串和图片,保存成数组,再按照顺序进行加载,当遇到某个字符串的长度,比当前行可以显示的长度还长的时候,进行字符串折断,再保存到数组,再显示!当垂直滚动条被拖动到最下面时,每次更新完MyCanvasArea里面的内容,将会自动滚动到最下面,如果滚动条不是处于最下面时,视为用户正在阅读信息,不进行自动滚动。当然,通过不断添加子控件,是一种较蠢的方法,但是被逼上梁山的人,没法子。所以在控制用户输入的时候,最好做一下控制,别让他一次性输入太多东西,服务器压力大,客户端也受不了!另外,里面的MyCanvasArea.cleanAll()方法用于清空全部内容,逐行清除功能还在扩展中 ![]()
这里是源码:
Flex 图文混排 下载地址1
Flex 图文混排 下载地址2
最近大米盘老是傻傻的,如果下载不了的话,留个言!
欢迎交流。
原文链接:http://flex.desizen.com/flex-pic-text-mixed/





jadesoul (2009/07/18)
很好,很不错!
joel (2009/07/18)
@jadesoul:
估计warmC看到了会骄傲了,哈哈,这个Flex 图文混排是新鲜出炉的呢.
warmC (2009/07/19)
@joel:亲爱的jole童鞋,用不用这样说我啊!
!今天跑去东莞,刚回来,累哦……
joel (2009/07/19)
@warmC:哇塞,你好酷哦,夜生活干到了东莞去啦…
warmC (2009/07/19)
@joel:我靠,长夜漫漫我以为只有我睡不着,原来jole姑娘你也睡不着啊!
joel (2009/07/19)
@warmC:我那是不想睡,唉,被你一说,睡吧.对了,我这头像明显是一特MAN的大叔哇
warmC (2009/07/19)
@joel:嗯,早点休息吧!是大叔吗?看起来明显是个小姑娘丫!
toromio (2009/07/31)
嗯,不错的想法,有没有好点的图文混编控件,推荐一下啊
warmC (2009/08/02)
@toromio:
,谢谢。现在Adobe开放Text Layout Framework下载了,估计就是最好的图文混排了。
Cnol (2009/09/27)
解决我的燃眉之急了!
kincs_ (2009/11/24)
不错的想法,但有个很明显的bug,当遇到换行时,就会出现混乱,所以博主也在DEMO中限死了TextInput组件,请教博主,如果将TextInput组件换成TextArea(文本可换行),该如何解决排版仍然正确呢?
PS:我研究了一会,暂时还想不到解决办法!希望博主能赐教!
songhuanren (2009/12/21)
你说的那个开源的项目是不是我博客里的那个?
warmC (2009/12/22)
不知你说的是哪一篇?狠久了,估计不是。
蒋航进 (2010/04/12)
怎么下载不了啊?? 请发我Q邮箱 谢谢
warmC (2010/04/13)
Flex 图文混排 下载地址2 这个地址可以下载
joel (2010/04/13)
@warmC:别理那些想不劳而获的,把文章写出来已经是一种分享了,拿出了吃的还得去喂到别人嘴里,太tmd气愤!
scarjiang (2010/04/14)
warmC (2010/04/15)
暂时没有用到fte。