AS3模拟iPhone/iPad图片抽出效果

源码：https://files.cnblogs.com/flash3d/iphoneTween.rar

昨天同学生日，去K歌。。（扯远了）其实事情是这样的。。去KTV的时候，发现KTV里面的点歌系统换了，换成触屏，系统界面貌似是Flash做的。里面有个搜索版块弹出的时候，模仿了iphone/ipad中图片抽出的效果。

从前在iphone上看过那个效果，愣是没看明白怎么做的。这次倒是仔仔细细的观察了一番，心中有了七八分把握，晚上回到宿舍就开始尝试，终于给试出来了哈！

效果中涉及到位图的扭曲，在flash9时代，位图的扭曲需要自己切三角形，麻烦无比。到了flash10时代，由于3D乃大势所趋，adobe多少也提供了一些更加方便的位图扭曲方法。

这里我就介绍我们今天用到的，在flash10中新增加的Graphics.drawTriangles方法。

drawTriangles字面理解，就是画三角形。当然adobe不会因为你需要画三角形才给你提供这个方法吧。其真正的作用是通过快速批量的画三角形来实现位图的扭曲。

这里我就贴API中对这个方法的介绍，来帮助大家理解这个方法的用途。

drawTriangles () 方法  

public function drawTriangles(vertices:Vector, indices:Vector = null, uvtData:Vector = null, culling:String = "none"):void

语言版本:  ActionScript 3.0
运行时版本:  Flash Player 10 

 

呈现一组三角形（通常用于扭曲位图），并为其指定三维外观。drawTriangles() 方法使用一组 (u,v) 坐标将当前填充或位图填充映射到三角形面。

可以使用任何类型的填充，但如果填充有转换矩阵，则将忽略该转换矩阵。

在使用位图填充时，uvtData 参数可改善纹理映射。

参数
vertices:Vector — 一个由数字构成的矢量，其中的每一对数字将被视为一个坐标位置（一个 x, y 对）。vertices 参数是必需的。 

 
indices:Vector (default = null) — 一个由整数或索引构成的矢量，其中每三个索引定义一个三角形。如果 indexes 参数为 null，则每三个顶点（vertices 矢量中的 6 对 x,y）定义一个三角形。否则，每个索引将引用一个顶点，即 vertices 矢量中的一对数字。例如，indexes[1] 引用 (vertices[2], vertices[3])。indexes 参数是可选的，但 indexes 通常会减少提交的数据量和计算的数据量。 

 
uvtData:Vector (default = null) — 由用于应用纹理映射的标准坐标构成的矢量。每个坐标引用用于填充的位图上的一个点。每个顶点必须具有一个 UV 或一个 UVT 坐标。对于 UV 坐标，(0,0) 是位图的左上角，(1,1) 是位图的右下角。
如果此矢量的长度是 vertices 矢量长度的两倍，则使用标准坐标而不进行透视校正。

如果此矢量的长度是 vertices 矢量长度的三倍，则将第三个坐标解释为“t”（即在视角空间中从视点到纹理的距离）。这有助于呈现引擎在三维中映射纹理时正确应用透视。

如果 uvtData 参数为 null，则将应用普通填充规则（和任何填充类型）。
 
 
 culling:String (default = "none") — 指定是否呈现面向指定方向的三角形。此参数可防止呈现在当前视图中看不见的三角形。此参数可设置为由 TriangleCulling 类定义的任何值。   

 代码中已经有注释，大家下来看吧。