先讲一下实现的思路和原理吧:放大镜大家都用过对吧?其实在flash里面实现发大镜无非就是用一块很大的区域显示比这个区域小的部分,所以也就是将放大镜中的像素按照位置映射到原图像上的某小部分。当然假如这一小部分比放大镜本身都大得话,那就变成缩小镜了。
首先,我们还是先看一下代码中的像素映射那部分。
var _dfilter:DisplacementMapFilter = new DisplacementMapFilter(一个Bitmap映射参数,new Point(0,0),1,2,0,0);
没错,在flash中我们可以使用DisplacementMapFilter滤镜来做像素映射,之前做的另一个效果
Bump Mapping也用的是这个滤镜,大家知道这个滤镜的强大了吧。看到这个函数大家一定觉得很希奇,怎么像素映射是使用一个图来作为映射的参数呢?这是因为通常在做图形时,他们更喜欢使用图象来做为参数传输,这样就可以把一个数组的参数当作一张贴图传输到显卡中。这个就是我们传入的映射图的样子。
图片附件: [displaceMap]
mag_displace_linear_edge.PNG
使用图片作为参数另一个好处,就是可以直观的看到这些参数分布的形态。至于这个映射图是怎么解析的呢?其实我们知道,通常一个真彩的像素有32bit,分别是ARGB,其中任意一个通道就占有8位宽,也就可以表示0-255中任何一个数字啦。在DisplacementMapFilter这个类中,他会读入这么一张图,然后将要显示的像素经过预先指定的2个通道分别读出x和y轴的位移,然后再到目标图上去寻找,bingo,就可以把颜色找到啦。具体的形式如下:
dstPixel[x, y] = srcPixel[x + ((componentX(x, y) - 128) * scaleX) / 256, y + ((componentY(x, y) - 128) * scaleY) / 256]
在这里,我就给这个displaceMapFilter传入了这么一张图。这张图在中间部分让图像平均放大,并且在靠近边缘是进行很夸张的放大,最终的效果大家可以在2进制里面下载。使用了一个DisplacementMapFilter之后,我们就可以得到一张非常朴素的放大镜效果了,然而有时候我们希望来点有意思的事情,比如把放大镜的折射率设置的夸张点,这样我们就可以透过放大镜看到一些再物体边缘有真实的折射效果,相信在日常生活中你也一定碰到过这些情况。实际上折射效果实现非常简单,其实就是把原图像的R,G,B通道分开,然后分别对他们使用我们前面说的放大镜效果,并且将这些放大镜的放大率作少许的调整,比如1.5,1.6,1.7。最后我们在将的到的三个通道使用Add渲染模式叠加起来。下面是使用和不使用棱镜效果的比较图。
图片附件: [无棱镜效果]
withFraction.PNG
大家也许会问这个映射的参数图是哪里来的,其实,那个图是我做的另外一个flash生成的....然后我在截个图,编辑编辑,在导到flash中的,很土吧,至于具体实现,大家可以去看我的代码。假如有什么不理解可以加我qq:29858901。
图片附件: [screenshot]
screenShot.JPG
最终效果:
源文件下载: release.rar