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 类定义的任何值。   

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

原文地址:https://www.cnblogs.com/flash3d/p/2332225.html