手把手教你实现印象派DIY功能

主要实现的效果如www.yxp.163.com中核心DIY模块所示，放张截图吧！

如果有朋友想要实现图片编辑功能的话，可以参考此文！由于项目保密原因，因此，有兴趣的读者也不要问我要什么源码了!本文会一步步的剖析实现效果及应该使用的技术。

(文字排版等以后在来优化下@mark一下)

项目需求分析

做事情之前总得知道自己做的是什么，要完成什么功能，实现什么效果。我们知道要画出这样一个界面好像并不是什么难事，难就难在，你界面上画的内容还要能够打印到真实的物体上。简单的截个屏所生成的图片的分辨率是不满足打印需求的(DPI不够)。那么，我们只能将界面上的内容以特定的格式保存下来，然后通过后台程序来生成满足打印需求的图片。如果要还原界面上的编辑内容的话，很明显，格式文件中需要保留元件的位置，大小，属性，特殊处理(如滤镜，图像特效)等信息。一般打印的图片文件是一个pdf文件(里面包含了N张jpg文件，打印厂商会把你得pdf中的图片解析出来的。。)。总体分析，到此结束！

功能需求及分析

 -->元件资源分析(文字，装饰，画框，背景，用户图片)

a.文字篇

          在界面中编辑文字，玩过Flash的同学会觉得，这有什么难的，用label组件设置一下字体的属性不就行了。可是我要告诉你，曾经我也这么以为，然后吃了大亏。好吧，我们来分析一下，文字编辑涉及到文字的大小，颜色，对齐方式，字体4个方面的内容，如果不涉及字体的话，确实可以用flash内置的一套来解决。可是假设我们提供了A字体，但是客户机上确没有A字体怎么办？哦，简单，把字体文件嵌到flash文件里呗。可是但是大家都知道，中文字体文件动不动就几M、几十M，你想想看，如果我要支持20种中文字体文字的切换，你内嵌的字体文件保守点都要上百M了，你还能期望你这个flash能在几秒内打开吗？所以，flash内嵌字体的方式是不可以用来生成我们需要字体的。

一条切实可行的解决方案是由后台来动态生成文字图片。具体点说，就是前台编辑的时候将文字的属性信息发给后台，后台据此生成图片，返回给前台显示即可.现在编辑文字的问题就全部转移到了后台。简单的说，我告诉后台，我要一张 字体是 迷你简哈哈，大小为24，内容是 测试，对齐方式是居中的图片，后台能生成对应的图片吗？很明显，是可以的。通过调用java的Font类即可生成(能够满足需求，但没有flash内置的好看),如果要求好看的话，就要去请教一下这方面的专门人才了。总之，这条路是目前来说比较可靠以及可行的方案。

 

(a)前台生成

(b)后台生成

b.装饰篇

首先看下前台装饰的效果吧。很明显，装饰图片拉伸放大不失帧。那么，有经验的码友们，可能就知道了装饰资源该用矢量图来操作了。是的，的确如此，不过，我还是做一个更详细的分析。其实，要实现装饰这个效果，有几条路可以走: 

1.矢量图路线

矢量图放大不失真，天然的满足我们的需求。矢量图最一般的格式是eps、ai(我也看过用pdf的)，要在flash中引入矢量图，需要将它转化成swf(用AI软件直接转就行了),注意跨域访问的问题

2位图路线

位图放大会失真，最简单的想法就是，如果我这个位图分辨率足够高，能够满足你在画布上的最大拉伸时的dpi,那么也不会产生失真效果，但是加载这样的图片显然会比较慢，所以，可以衍生出位图方案的可行路径，位图存储lowDpi,MiddleDpi,HighDpi三种dpi的的文件，当画布上拉伸装饰时，如果当前尺寸的图片会失真，则去动态加载更高Dpi的图片

总结一下，装饰的实现还是比较简单的，从实现难以程度来说，矢量图路线比较简单且效果也很好(希望你们的美工会操作AI等工具哦!!)。

(c)装饰

c.画框篇

老样子，看下画框的实现效果，同装饰一样，放大不失真，且能够有透明遮罩效果(Alpha Mask)。同样，也可以从矢量图和位图的角度来考虑实现，见上述分析即可。这里，着重分析一下如何实现画框的透明遮罩效果。

在Flash中实现遮罩效果，最自然的想法就是用mask(a.mask=b),可以参见http://bbs.9ria.com/thread-219152-1-1.html。这条路我不推荐大家使用，因为同时使用mask、matrix(拉伸放大会改变的属性)会导致计算这个元件其他属性不准确，如位置、高宽，这个被证明是flex的框架bug，就别想去修改它了。这里推荐另外一种实现透明遮罩的方案，设置孩子BlendType属性的值为BlendType.ALPHA即可(别忘了设置父组件的BlendType为BlendType.Layer)

(d)画框

d.背景篇

背景这个元件，没有什么特殊的处理，非常简单，只要充满画布即可(percentageWidth=100%  percentageHeight=100%)，资源类型同样也存在矢量、位图两套方案

-->前台Flash图片DIY

flash图片DIY工具也是整个项目最最最最最核心的模块，要实现的功能有，支持缩放、旋转、图片特效、投影、复制、剪切、删除、上移、下移、透明度，这个部分我会另写一篇文章进行介绍，并且开源我实现的这个工具，如果有兴趣自己实现的话，可以参考做的比较好的旋转缩放工具的几个实现:

ObjectHandler (封装的很好，可以在此基础扩展)：http://code.google.com/p/flex-object-handles/

TranformManager (大神之作，核心就一个类)：http://www.greensock.com/transformmanageras3/

TransformBox(国人仿制的，用来学习很好) ：http://chaimzane.iteye.com/blog/1584271

-->后台图片生成

这个部分是决定整个项目能不能成功的核心部分。让我们回忆一下，前台保存的内容转换成特定格式的文件，后台需要根据这个文件来还原前台编辑的内容，生成可以满足打印分辨率的图片。

a.特殊格式文件分析

文件中，需要保存画布上每个元件的状态，具体有 ： 高、宽、左上角的localX、左上角的localY、matrix(旋转缩放)、alpha(透明度)、rotation(旋转角)、filters(滤镜)、source(图片路径),我们项目中采用xml的方式进行的，当然json或者其他自定义的文件格式都可以，只要方便操作即可。

b.解析及还原

解析就不谈了，文件格式都自己定义了，还有什么不能解析的呢。。。 

主要谈谈还原吧。

位置及大小的还原：涉及到打印，就涉及到dpi、出血bleed的问题，简单阐述下这部分的计算公式。假设实际打印的尺寸为x cm*y cm，那么你生成的图片大小应该至少要有   [(x+2*bleed)*dpi/2.54] *[(y+2*bleed)*dpi/2.54]   的分辨率,假设出血bleed是以cm为单位的，好的，剩下的就是讲解析后的元件按其在前台舞台上的大小进行缩放计算还原。

图像特效的还原： 简单的来说，就是前后台规定一下，每个特效处理对应的代号，前台可以通过pixel bender、滤镜来进行图像特效的处理；后台可以通过调用opencv或其他第三方库来操作

要实现yxp的整个功能，其实还是比较复杂的，如果想要看具体代码的同学，请持续关注我的文章。

最后给个时间上的分析，如果一个团队要实现整个功能的话，flash这块最好安排3-4个人，时间为2-3个月，后台处理2个人(1个月即可)。

(待完善@mark一下)