[转]自制中文字库嵌入——单色图形面积压缩/加密法

自制中文字库嵌入——单色图形面积压缩/加密法

  首先这个小项目的目的虽然达到了,但是效果一般,借此文章希望就使用的方法上对大家有所启迪。其中所涉及的技术也属于一时的灵感所致。
  最近在天地会看到一些关于字体嵌入的提问,于是有了思考。因为自己在工作中也曾经碰到过类似的问题,比如字库容量过大导致SWF体积过大而影响用户体验。那么首先想到的自然就是如何压缩字体。
  如果是自定义字库的话第一,库中的文字数量应该是自己可控制的,第二,解压缩尽量的要方便,第三,最好以单独文件形式存在和SWF分离,这样也可以在加载多个字库的时候根据实际需要再开始加载。
  原始的字库都是由一次和二次贝塞尔曲线绘制轮廓来保存字体样式的,如果我们采用相同的方法那么数据量就很难在原来的基础上减少。在实际使用中,除了一些动画特效和PhotoShop那样的图形制作的特殊需要,我们所使用文字大小都是相对比较小的,比如最常用的就是12-16号的宋体,顶多就是标题的字体稍微的大一点,但是也很少有大于30号字体的时候。特别是在单个以内容为主的页面中字体大小一般都只有1到2个尺寸区别,大部分都是大面积的单一字体和单一字体大小。那么我们只要把最大号字体以位图形式保存进图片在使用的时候再COPY出来即可,小的字体则可以通过用大的字缩小来实现。于是字体样式的存储媒介就由曲线和点的数据转换成BitmapData来实现了。
  再来就是我们常用的中文字数限制,中文字库按国际规范分为一级字库二级字库以及之后发展的各个版本。这里我们选择最常用的字库范围GBK,字编码从0x4E00到0x9FA5一共20901个汉字。那么要多大一张位图才能容纳30号大小的两万余的汉字呢?直接算像素的就是20901*30*30=18810900个像素,这已经远远的超过了Flash单个BitmapData 2880*2880=8294400像素的限制。难道得用多张BitmapData来存放么?如果字体再大怎么办?于是乎~~有了本单色图形面积压缩法的产生。


单色图形面积压缩法

设计这个算法的初衷就像前面所说的由于字体一大就无法放进单个BitmapData中去,那么就得想办法在有限的空间中放入最多个可以单独还原出来的字。这里我把每个字都看做是一个单色图形对待,那么整篇bitmapData其实也是一个单色的图形而已只是“图案”很复杂而已。
这个算法的基础比较容易理解,举个例子,我有一张白纸,我分别用红黄蓝三种颜色在同一位置写3个不同的字相互重叠,写完之后我们仍然可以通过肉眼轻易的分辨出写的三个是什么字。那么我们尝试在同一范围内以最多的颜色写字只要最终能认出其中的任意一个字即可。或者说在同一范围内重复以不同颜色绘制不同的图形,但是最终绘制完的结果要保证顺利解析出之前的所有图形并且要保证像素级的精确。

一、压缩原理

[img]http://dl.iteye.com/upload/attachment/444764/0588d61d-1e49-34ad-be4a-12c81bbed490.jpg[/img]

  如上图所示,BitmapData中每一个像素都是一个ARGB色,值取值范围从0x00000000到0xFFFFFFFF分为4个通道,分别为alpha通道、red通道、green通道、blue通道。通过BitmapData类的一些方法可以方便的分离出各个通道。
  这里为了最大限度的重叠图形我利用了十六进制的每一位,十六进制中每位的取值范围为0到F换成十进制也就是0到16。那么1到16中可以取1,3,5三个值进行任意组合相加保证最终结果不重复。那么一个颜色通道有两位十六进制,低位取1,3,5高位则取10,30,50这样6个数字穷举组合一共有2的6次方64种结果。那么三个通道即可放入最多18个颜色,组合结果就是64的三次方,其实也就是2的24次方。最终我们得到了18个颜色分18次在一个区域内以叠加的形式绘制图形的话仍然可以单独还原某一次的具体图形。那么也就是说我们可以把一张单色图形的图片压缩到原来的1/18的面积。
18种颜色值按规律如图片中顺序为:
0xFF010000
0xFF030000
0xFF050000
0xFF100000
0xFF300000
0xFF500000
0xFF000100
0xFF000300
0xFF000500
0xFF001000
0xFF003000
0xFF005000
0xFF000001
0xFF000003
0xFF000005
0xFF000010
0xFF000030
0xFF000050
复制代码
  篇外话:有人可能会问为什么不使用ALPHA通道的两位再储存6个颜色进去,这里经过我尝试发现FLASH的BitmapData类在处理透明值非0xFF的颜色时会产生巨大的偏差。比如我们明明设置了某像素的颜色为0x08111111,但是当我们用BitmapData.getPixel()和BitmapData.getPixel32()去取这个像素的颜色的时候会发现颜色变了…. 那么由于颜色的偏差数值的改变最终导致无法正确解析出原来的图形。所以在这里我的算法中始终保持Alpha通道的值始终为0xFF。对此BUG有兴趣的朋友可以尝试一下以下代码。
var testColor:BitmapData=new BitmapData(10,10,true,0x08111111)
trace(testColor.getPixel32(1,1).toString(16))
trace(testColor.getPixel(1,1).toString(16))
复制代码
有了算法,我们开始制作压缩后的图形。

二、压缩图形
压缩字库主类FontCondensation类
package Lii.text
{
import Lii.events.FontCondensationEvent;

import flash.display.BitmapData;
import flash.display.BlendMode;
import flash.events.EventDispatcher;
import flash.filters.ColorMatrixFilter;
import flash.geom.ColorTransform;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.utils.clearTimeout;
import flash.utils.setTimeout;

public class FontCondensation extends EventDispatcher
{

private var _fontName:String="宋体" //字体名
private var _fontSize:int=12 //字体大小
private var _fontFormat:TextFormat //字体格式
private var _fontMin:int=0x4E00 //起始字编号
private var _fontMax:int=0x9FA5 //结束字编号
private var _W:int //每行位图容纳字数
private var _H:int //总行数
private var _textField:TextField //绘制图像源对象
private var _fontBMPD:BitmapData //保存数据用bitmapData
private var _fontCT:ColorTransform=new ColorTransform() //色彩设置用
private var _total:int=0x4E00 //绘制过程记数
private var _colorNum:int=18 //最大绘制色彩数
private var _sto:int //setTimeout主体
private var temp:BitmapData //临时存放用bitmapData
private var myM:Matrix=new Matrix() //位移用Matrix,在向fontBMPD中draw字的时候使用
private var TFMatrix:Matrix=new Matrix() //由于TextField有时有边框间隔,所以在向TEMP绘制单字的时候需要平移

private const _colorList:Array=[0xFF010000,
0xFF030000,
0xFF050000,
0xFF100000,
0xFF300000,
0xFF500000,
0xFF000100,
0xFF000300,
0xFF000500,
0xFF001000,
0xFF003000,
0xFF005000,
0xFF000001,
0xFF000003,
0xFF000005,
0xFF000010,
0xFF000030,
0xFF000050]
//绘制用18色
/**
* 构造函数
* @param fontName 字体名称
* @param size 字体大小
* @param Max 最大字数
* @param textField 可以使用引用来的TextField对象来做数据源,默认为null。
*
*/
public function FontCondensation(fontName:String,size:int,Max:uint,textField:TextField=null)
{
//设置字体名
this._fontName=fontName
//设置字体大小
this._fontSize=size
//起始字编号是不变的,那么结束字编号则根据最大字数来计算
this._fontMax=this._fontMin+Max
//根据字体来计算每行可放下几个完整在汉字字符
this._W=2880/this._fontSize>>0
//根据每行容纳的字符数来计算一共需要多少行才能绘制完所有字符
this._H=Math.ceil((this._fontMax-this._fontMin)/18/this._W)
//计算fontBMPD的宽度,如果绘制不满一行则计算所需的宽度,如果超过一行则以2880作为宽度
var BMPwidth:int=(this._fontMax-this._fontMin)/18>this._W?2880:Math.ceil((this._fontMax-this._fontMin)/18)*this._fontSize
//新建fontBMPD
this._fontBMPD=new BitmapData(BMPwidth,_H*_fontSize,true,0)
//确定绘制源是选择自己新建还是外部引用
if(textField){
this._textField=textField
}else{
this._textField=new TextField()
}
//给TF设置内容(不设置内容的话无法正确设置字体格式)
this._textField.text="AONE雳"
//新建文本格式
this._fontFormat=new TextFormat()
//设置文本格式字体名
this._fontFormat.font=this._fontName
//设置文本格式字体大小
this._fontFormat.size=this._fontSize
//对TF应用字体格式
this._textField.setTextFormat(this._fontFormat)
//根据字体大小新建临时绘制用bitmapData
this.temp=new BitmapData(_fontSize,_fontSize,true,0x00000000)
//TFMatrix.tx=-2
//TFMatrix.ty=-2
}
/**
* 开始生成压缩的bitmapData
*
*/
public function start():void{
this.addEventListener(FontCondensationEvent.CONDENSATIONING,nextFont)
drawFont(this._fontMin)
}
/**
* 停止压缩
*
*/
public function stop():void{
this.removeEventListener(FontCondensationEvent.CONDENSATIONING,nextFont)
this._fontBMPD=null
clearTimeout(_sto)
}
//绘制压缩完一个字符后触发,间隔1毫秒后绘制下一字符
private function nextFont(e:FontCondensationEvent):void{
_sto=setTimeout(drawFont,1,_total)
}
//绘制压缩图的主函数
private function drawFont(i:int):void{
//根据当前编号获得对应字符并且赋给TF
_textField.text=String.fromCharCode(i)
//对TF应用文本格式
_textField.setTextFormat(this._fontFormat)
//把临时bitmapData清空
temp.fillRect(temp.rect,0)
//向临时bitmapData绘制当前字符
temp.draw(_textField,TFMatrix)
//设置颜色格式的颜色值(18色循环取色)
_fontCT.color=_colorList[i%_colorNum]
//向bitmapData应用变色
temp.colorTransform(temp.rect,_fontCT)
//计算当前字符在总图中的XY坐标
myM.tx=Math.floor((i-this._fontMin)%(18*_W)/18)*_fontSize
myM.ty=Math.floor((i-this._fontMin)/(18*_W))*_fontSize
//向总图绘制该字符,滤镜模式为相加
_fontBMPD.draw(temp,myM,null,BlendMode.ADD)
//字符编号加1
_total++
//触发当前字符绘制完成事件(绘制过程中)以方便检测进度
this.dispatchEvent(new FontCondensationEvent(FontCondensationEvent.CONDENSATIONING))
//判断当前字符编号是否超出结束字符编号
if(_total==_fontMax){
//如果超出,触发绘制压缩完成事件
this.dispatchEvent(new FontCondensationEvent(FontCondensationEvent.COMPLETE))
//移除进度事件触发
this.removeEventListener(FontCondensationEvent.CONDENSATIONING,nextFont)
}
}
/**
* 当前已绘制压缩的字符数
* @return
*
*/
public function get nowFontNumber():int{
return this._total-this._fontMin
}
/**
* 总字符数
* @return
*
*/
public function get totalFonts():int{
return this._fontMax-this._fontMin
}
/**
* 总图的bitmapData数据
* @return
*
*/
public function get bitmapData():BitmapData{
return this._fontBMPD.clone()
}
/**
* 起始字符编号
* @return
*
*/
public function get startCharCode():int{
return this._fontMin
}
/**
* 结束字符编号
* @return
*
*/
public function get endCharCode():int{
return this._fontMax
}
/**
* 字体大小
* @return
*
*/
public function get fontSize():int{
return this._fontSize
}

}
}


  以上是一个完整的压缩类,可以根据参数设置压缩出所需要的BitmapData数据。之后只要把这个BitmapData保存为文件使用时加载即可。在提供的DEMO中我保存成.lii格式的自定义文件。
下图为实际压缩好的BitmapData效果(局部)

[img]http://dl.iteye.com/upload/attachment/444766/61b4ada1-de5f-370e-9b5d-b3a5a5d8f6a6.jpg[/img]

  这里不得不提一下的就是TextFiled的选择,开始由于要保存文件整个程序是一个AIR项目,但是在多次压缩后发现压缩出的BitmapData效果非常不理想。在经过反复的原因查找发现是由于FLEX编译的TextFiled无法使用设备字体所致,所造成的结果就是在绘制每个字符的时候有半透明像素,由于BitmapData的那个透明通道取色BUG导致数据结果偏差。无奈最后只能选择用FLASH来做编译和压缩动作,然后把制作好的BitmapData转成ByteArray数据发送给FMS再发送给AIR程序来进行压缩和文件保存。


三、字符还原
  有了压缩好的字库,接下来就是如何使用了。首先自然是把文件读进SWF然后还原成BitmapData。这里LOAD自定义文件使用的是URLStream类,否则无法把里面压缩过的ByteArray正常还原。
压缩过程本来选择用FOR循环逐个像素取色然后分离出每个像素对应的归属,但是那样明显效率过于低下,实际测试是每取一个40px大小的字要4-5毫秒非常之慢。于是尝试使用BitmapData的内部方法来进行过滤出最终结果,毕竟用类的内部方法效率是最高的么。

  最终通过数次BitmapData.threshold()方法成功分准确分离出需要的结果。其原理为,之前我说过每个通道低位3色和高位3色可以在单通道里组合出64种不同的结果,组合过程中有一个规律,就是必含有6色中1色的组合固定为31种。那么我要知道某一色的所有像素只要去找这31种结果所包含的像素即可。过程则是先通过ColorMatrixFilter滤镜高效的分离出字符所在的颜色通道,然后对31种可能性逐个检测,把符合可能性的像素独立出来,那么当31次检测完毕我们需要的结果就自然呈现出来了。最后在把不需要的像素再通过threshold()设置为全透明即可。剩下的不透明像素则可以再次通过threshold()方法设置成自己想要的任何颜色。其整个过程的计算过程都是由BitmapData类自己的方法完成,虽然进行了总共1次滤镜和33次threshold()方法,但是获取一个40px大小的字只需要0.3毫秒左右,效率整整提升了10几倍。

下面是分析主类的其中主函数有详细注释。

package Lii.text
{
import Lii.events.LiiFontEvent;

import flash.display.BitmapData;
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.ProgressEvent;
import flash.filters.ColorMatrixFilter;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.net.URLRequest;
import flash.net.URLStream;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.utils.ByteArray;
public class LiiFont extends EventDispatcher
{
private var fontBMPD:BitmapData
private var fontURL:URLRequest
private var W:int
private var loader:URLStream
private var _fontSize:int
private var _fontMin:int
private var _fontMax:int
private var _fontName:String
private var _width:int
private var _height:int
private var _smooth:Boolean=false
private var _outTextField:TextField
private var _outTextFormat:TextFormat
//关键常量数组,保存了每个通道对应的高低位6个颜色每个在组合中存在的31种类混合结果,一共有6*31个uint参数
private const colorList:Array=[[16777216,67108864,100663296,285212672,822083584,1358954496,150994944,335544320,872415232,1409286144,369098752,905969664,1442840576,1090519040,1627389952,2164260864,419430400,956301312,1493172224,1140850688,1677721600,2214592512,1174405120,1711276032,2248146944,2432696320,1224736768,1761607680,2298478592,2483027968,2516582400,2566914048],[50331648,67108864,134217728,318767104,855638016,1392508928,150994944,335544320,872415232,1409286144,402653184,939524096,1476395008,1124073472,1660944384,2197815296,419430400,956301312,1493172224,1140850688,1677721600,2214592512,1207959552,1744830464,2281701376,2466250752,1224736768,1761607680,2298478592,2483027968,2550136832,2566914048],[83886080,100663296,134217728,352321536,889192448,1426063360,150994944,369098752,905969664,1442840576,402653184,939524096,1476395008,1157627904,1694498816,2231369728,419430400,956301312,1493172224,1174405120,1711276032,2248146944,1207959552,1744830464,2281701376,2499805184,1224736768,1761607680,2298478592,2516582400,2550136832,2566914048],[268435456,285212672,318767104,352321536,1073741824,1610612736,335544320,369098752,1090519040,1627389952,402653184,1124073472,1660944384,1157627904,1694498816,2415919104,419430400,1140850688,1677721600,1174405120,1711276032,2432696320,1207959552,1744830464,2466250752,2499805184,1224736768,1761607680,2483027968,2516582400,2550136832,2566914048],[805306368,822083584,855638016,889192448,1073741824,2147483648,872415232,905969664,1090519040,2164260864,939524096,1124073472,2197815296,1157627904,2231369728,2415919104,956301312,1140850688,2214592512,1174405120,2248146944,2432696320,1207959552,2281701376,2466250752,2499805184,1224736768,2298478592,2483027968,2516582400,2550136832,2566914048],[1342177280,1358954496,1392508928,1426063360,1610612736,2147483648,1409286144,1442840576,1627389952,2164260864,1476395008,1660944384,2197815296,1694498816,2231369728,2415919104,1493172224,1677721600,2214592512,1711276032,2248146944,2432696320,1744830464,2281701376,2466250752,2499805184,1761607680,2298478592,2483027968,2516582400,2550136832,2566914048]]
public function LiiFont()
{
this._outTextField=new TextField()
this._outTextFormat=new TextFormat()
}
public function load(url:URLRequest):void{
this.fontURL=url
startLoad()
}
private function startLoad():void{
loader=new URLStream()
loader.load(this.fontURL)
loader.addEventListener(ProgressEvent.PROGRESS,loading)
loader.addEventListener(Event.COMPLETE,loadComplete)
}
private function loading(erogressEvent):void{
this.dispatchEvent(new Event(ProgressEvent.PROGRESS))
}
private function loadComplete(e:Event):void{
setData()
this.dispatchEvent(new Event(Event.COMPLETE))
}
//解析ByteArray并对类的一些参数进行设置
private function setData():void{
var bytes:ByteArray=new ByteArray()
loader.readBytes(bytes)
bytes.uncompress()
bytes.position=0
this._width=bytes.readUnsignedInt()
bytes.position=4
this._height=bytes.readUnsignedInt()
bytes.position=8
this._fontSize=bytes.readUnsignedInt()
bytes.position=12
this._fontMin=bytes.readUnsignedInt()
bytes.position=16
this._fontMax=bytes.readUnsignedInt()
bytes.position=20
var nameLength:int=bytes.readShort()
bytes.position=22
this._fontName=bytes.readUTFBytes(nameLength)
bytes.position=22+nameLength
var bmpBytes:ByteArray=new ByteArray()
bytes.readBytes(bmpBytes,0,(bytes.length-22-nameLength))
this.fontBMPD=new BitmapData(this._width,this._height,true,0)
this.fontBMPD.setPixels(this.fontBMPD.rect,bmpBytes)
this.W=Math.floor(2880/this._fontSize)
}
public function fromCharCode(index:int,fontSize:int=0,fontColor:uint=0xFF000000,bgColor:uint=0x00000000):BitmapData {
//声明一个输出的BD对象
var outBMPD:BitmapData
//判断请求的字符大小是否和原始压缩尺寸相同,或是否缺省
if(fontSize!=this._fontSize&&fontSize!=0){
//如果请求字符的大小不等于压缩时的尺寸,则输出的BD对象按照请求尺寸建立
outBMPD=new BitmapData(fontSize,fontSize,true,0x00000000)
}
//建立计算用BD对象,其尺寸始终按照压缩时的默认尺寸设置
var bmpd:BitmapData=new BitmapData(this._fontSize,this._fontSize,true,0x00000000)
//判断请求的字符编码是否在压缩的字符范围内---
//这个情况下程序会采用一个系统默认字体的字符来替代压缩字库的字符
if(index<this._fontMin||index>this._fontMax){
//如果请求字符大小为缺省
if(fontSize==0){
//输出BD则按照默认字符大小生成
outBMPD=new BitmapData(this._fontSize,this._fontSize,true,0x00000000)
//设置输出的文字格式中的字体大小为默认字体大小
_outTextFormat.size=this._fontSize
//如果请求输出的字体大小非缺省
}else{
//输出BD为请求输出的字体大小
outBMPD=new BitmapData(fontSize,fontSize,true,0x00000000)
//设置输出文字个中中的字体大小为请求输出的字体大小
_outTextFormat.size=fontSize
}
//根据字编码设置输出TF的内容
_outTextField.text=String.fromCharCode(index)
//设置输出TF的文本格式
_outTextField.setTextFormat(_outTextFormat)
//向输出BD绘制字符
outBMPD.draw(_outTextField)
//设置字体颜色
outBMPD.threshold(outBMPD,outBMPD.rect,new Point(),"!=",0x00000000,fontColor)
//设置背景颜色
outBMPD.threshold(outBMPD,outBMPD.rect,new Point(),"==",0x00000000,bgColor)
//触发超出字符编号事件
this.dispatchEvent(new Event(LiiFontEvent.OUTOF_CHARCODE))
}else{
//根据字符编号计算出字符在总图中的所在位置和偏移量
var myMatrix:Matrix=new Matrix(1,0,0,1,-Math.floor((index-this._fontMin)%(18*W)/18)*this._fontSize,-Math.floor((index-this._fontMin)/(18*W))*this._fontSize)
//锁定计算用BD,为了避免多余的渲染
bmpd.lock();
//向计算用BD绘制字符编号所在位置的压缩图像
bmpd.draw(fontBMPD,myMatrix)
//根据字符编号计算出字符在该位置所在的通道,0为RED通道,1为GREEN通道,2为BLUE通道
var group:int=Math.floor(index%18/6)
//设置滤镜参数
var myM:ColorMatrixFilter=new ColorMatrixFilter([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,group==0?1:0,group==1?1:0,group==2?1:0,0,0]);
//新建一个对齐点
var myPointoint=new Point();
//过滤掉不需要的通道,把所需要的通道复制到ALPHA通道预备计算
bmpd.applyFilter(bmpd,bmpd.rect,myPoint,myM);
//开始31次可能性判断
for (var l:int=0; l<31; l++) {
//根据colorList中二纬数组所对应的可能性色值进行对比,发现同色的设置成不透明白色
bmpd.threshold(bmpd,bmpd.rect,myPoint,"==",colorList[index%18%6][l],0xFFFFFFFF,0xFFFFFFFF,false)
}
//循环结束,把非白色区域设置成背景色
bmpd.threshold(bmpd,bmpd.rect,myPoint,"!=",0xFFFFFFFF,bgColor,0xFFFFFFFF,false);
//把白色区域设置成请求的字体颜色
bmpd.threshold(bmpd,bmpd.rect,myPoint,"==",0xFFFFFFFF,fontColor,0xFFFFFFFF,false);
//解除计算用BD锁定
bmpd.unlock();
//如果输出BD存在,也就是说请求输出的字体大小和实际压缩大小不同
if(outBMPD){
//计算出拉伸比例
var s:Number=fontSize/this._fontSize
//新建一个拉伸用矩阵
var newSizeMatrix:Matrix=new Matrix()
//把拉伸参数赋予矩阵
newSizeMatrix.scale(s,s)
//把计算用BD按拉伸矩阵和是否平滑参数向输出BD绘制
outBMPD.draw(bmpd,newSizeMatrix,null,null,null,_smooth)
}else{
//把计算用BD直接引用给输出用BD
outBMPD=bmpd
}
}
//输出结果
return outBMPD
}
public function get fontName():String{
return this._fontName
}
public function get fontSize():int{
return this._fontSize
}
public function get startCharCode():int{
return this._fontMin
}
public function get endCharCode():int{
return this._fontMax
}
public function get smooth():Boolean{
return this._smooth
}
public function set smooth(B:Boolean):void{
this._smooth=B
}
}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值