图文混排组件(RichTextField)

前两天一个网友请我帮忙用as3实现图文混排的组件,要求支持复制粘贴和剪切功能,还好这段时间不忙,便答应了尝试一下。刚着手的时候考虑使用占位字符,类似[smile]表示笑的表情,不过都还没开始敲代码就发现这样不行,文本框里会显示[smile]的文本,必须要用空白字符才行。那就计算图片的宽度以及空格的宽度,用多个空格来占位吧。那高度呢?用回车?如果一行中有多个不一样大小的图片那不是还要计算最大高度?还有复制粘贴的时候怎么知道复制了哪个?天啊,原来图文混排还要考虑这么多东西的。最怕遇到这些想不通的问题,晚上又要失眠了。

第二天早上就不再自己想了,还是先研究下别人是怎么做的,于是重点学习那个朋友发给我参考的一些demo,有用Bitmap自己重新draw的,这个要计算很多东西,直接pass。发现另一个的作法是用中文空格字符(UniCode码12288)作为占位符,然后设置这个字符的size为图片高度,再通过图片宽度计算letterSpace,这样只需要在字符对应的位置上面放一张图片即可。天才啊,我想再也没有比这更简单的作法了吧。那么问题来了,我修改文本的时候怎么知道这个字符跑到哪去了呢?他的作法是每张图片都有一个index属性,对应字符在文本中的位置,每次修改文本的时候都判断在哪个位置增加了多少字符,删除了多少字符,再更新图片的序号。但这样还是要做很多复杂计算。而且最重要的一个问题是他没有实现粘贴图片的功能,如果自己实现个粘贴板又要一大堆复杂的计算。天啊,实现了这个功能后我是不是就可以写操作系统了?

应该会有更简单的办法的,为什么不想想UniCode里还有没有其他不显示出来的空白字符呢?这样一个字符对应一个图片什么问题都解决了。于是我就随机测试了几组编码范围,发现62000到63000这一段的编码会显示空白。哈哈,原来真的有这样的字符,感动得泪流满面啊!后面专门搜了一下有关UniCode的文章,有兴趣的同学可以看这里,还有一张震撼的鸟瞰图!原来57344到63743这段范围的字符都是看不到的,我刚好测试出来的是他的子集。

本来以为这样就完事,但事情总不会像你想象的那么简单,在chrome中居然把这个看不到的字符显示出来了,而且字符间距和我调试的不一样,想不到flash也有兼容性问题啊。这怎么办呢?难道限制不能插入半透明的图片么?那间距怎么处理?wait,这会不会是字体的问题?以前遇到过微软雅黑在chrome中显示不出来的问题,那我把这个字符的字体设置为宋体(simsun)吧,果然,这次真的没问题了,是真的!!!我没骗人。其实还会有点小问题的,类似要用flashplayer11及以上版本发布之类,不过这些都是小儿科了。真想不到核心代码就那么几十行的东西能折腾出这么多问题来。

我是不是不久没说话了,一说就那么大堆废话,那废话就不多说了,demo走起:

源码托管地址:https://git.oschina.net/wl/RichTextField

时间: 2024-11-10 11:24:02

图文混排组件(RichTextField)的相关文章

iOS实现简单图文混排效果

在很多新闻类或有文字展示的应用中现在都会出现图文混排的界面例如网易新闻等,乍一看去相似一个网页,其实这样效果并非由UIWebView 加载网页实现.现在分享一种比较简单的实现方式 iOS sdk中为我们提供了一套完善的文字排版开发组件:CoreText.CoreText库中提供了很多的工具来对文本进行操作,例如CTFont.CTLine.CTFrame等.利用这些工具可以对文字字体每一行每一段落进行操作. 此例中默认图片都在右上方,且为了美观和开发简便设定所占宽度都相同. 首先,需要引入Core

简单的Coretext 图文混排

在很多新闻类或有文字展示的应用中现在都会出现图文混排的界面例如网易新闻等,乍一看去相似一个网页,其实这样效果并非由UIWebView 加载网页实现.现在分享一种比较简单的实现方式 iOS sdk中为我们提供了一套完善的文字排版开发组件:CoreText.CoreText库中提供了很多的工具来对文本进行操作,例如CTFont.CTLine.CTFrame等.利用这些工具可以对文字字体每一行每一段落进行操作. 此例中默认图片都在右上方,且为了美观和开发简便设定所占宽度都相同. 1.        

AS3聊天单行输入框图文混排完美实现

几年前刚毕业,第一个游戏模块做的就是聊天.到现在,几个游戏写过几次聊天模块, 之前在4399做的<幻龙骑士>(又名<神骑士>),还有上周六刚上线的<疯狂的子弹>, 用的是同一套代码,聊天输入框没有图文混排,而是用符号代替,输出面板才有图文混排. 输出面板的图文混排由于内容没有键鼠操作,实现很简单,不在本文讨论之列:当然本 文的代码中抽出一小部分就可以实现了.以上两款游戏没有加密,有兴趣的可以去弄来看看, <子弹>里面的键鼠.技能.射击.弹道搞得好累人啊 ?(

使用CoreText实现图文混排

OS没有现成的支持图文混排的控件,而要用多个基础控件组合拼成图文混排这样复杂的排版,是件很苦逼的事情.对此的解决方案有使用CoreText进行绘制,或者使用TextKit.本文主要讲解对于CoreText的使用. 案例下载地址 https://github.com/ClavisJ/CoreTextDemo 环境信息: Mac OS X 10.10.1 Xcode 6.1.1 iOS 8.1 正文: 一.Core Text简介 CoreText是基于IOS3.2及OSX10.5的用于文字精细排版的

NGUI-制作位图字体以及图文混排

制作字体过程 首先得下载一个位图制作工具Bitmap font generator,可以点击这里下载 1.新建txt文件,输入字体里面包含的文字 2.保存为utf-8格式:点击文件另存为,选择编码格式为UTF-8 3.打开下载的bitmap font软件,选择options->font settings,设置字体等选项 4.选择Edit->select chars from file,然后选择我们刚刚建好的文件 5.选择options->save bitmapfont as .然后就会生

【iOS】使用CoreText实现图文混排

iOS没有现成的支持图文混排的控件,而要用多个基础控件组合拼成图文混排这样复杂的排版,是件很苦逼的事情.对此的解决方案有使用CoreText进行绘制,或者使用TextKit.本文主要讲解对于CoreText的使用. 案例下载地址 https://github.com/ClavisJ/CoreTextDemo 环境信息: Mac OS X 10.10.1 Xcode 6.1.1 iOS 8.1 正文: 一.Core Text简介 CoreText是基于IOS3.2及OSX10.5的用于文字精细排版

iOS火焰动画效果、图文混排框架、StackView效果、偏好设置、底部手势等源码

iOS精选源码 高性能图文混排框架,构架顺滑的iOS应用. 使用OpenGLE覆盖阿尔法通道视频动画播放器视图. 可选最大日期截至当日日期的日期轮选器ChooseDatePicker 简单轻量的图片浏览器YCPhotoBrower 使用偏好设置.属性列表.归档解档保存数据.恢复数据 页面底部手势交互滚动UITableView 使用CoreAnimation来模拟iOS中的StackView. 盒子可以更具长宽高变化的动画 iOS优质博客 iOS导航栏使用总结 目录:一.设置导航栏样式二.自定义导

Laya的位图文字,高亮文字,图文混排

测试版本:Laya 2.1.1.1 位图文字 白鹭的位图文字是由TextureMerger制作,然后在exml里使用. Laya的则直接使用FontClip组件. 在编辑模式,层级窗口中右键,选择创建组件UI,选择FontClip 将美术提供的位图文字赋值给FontClip的属性面板的skin属性,这样就是个位图文字了.比白鹭要方便些. 高亮文字 白鹭的高亮文字有文本样式 tx.textFlow = <Array<egret.ITextElement>>[ {text: "

(一一一)图文混排基础 -利用正则分割和拼接属性字符串

很多时候需要用到图文混排,例如聊天气泡中的表情,空间.微博中的表情,例如下图: 红心和文字在一起. 比较复杂的情况是表情夹杂在文字之间. 要实现这种功能,首先要介绍iOS中用于显示属性文字的类. 用于文字显示的类除了text属性之外,还有attributedText属性,这个属性是NSAttributedString类型,通过这个属性可以实现不同文字的不同字体.颜色甚至把图片作为文字显示的功能. 下面介绍这个字符串的使用. 以一条微博内容为应用场景,介绍如何从中找出表情.话题等内容,其中表情替换