ActionScript

转载请注明出处：http://fdream.net，作者：Fdream

放着放着就忘了，多亏army同学在后面催我，要不然还真不知道什么时候会继续弄这个。今天上午又抽空捣鼓了一下，偏移总算是弄出来了，不过渲染效率很低，中间的计算过程应该还可以继续优化的。另外，弄到这里发现还是有问题，分得较细的时候会出现裂缝……误差真可怕！

先不管这个误差，我们来看看能不能形变先。由于计算形变矩阵需要初始的坐标和新的坐标，需要两个方法来计算（貌似可以合并？）：

// calculate points
// 包含x坐标和y坐标，分别存储在pxs和pys数组中
// @params:
//   w: 位图宽
//   h: 位图高
//   hs: 水平分段数
//   vs: 垂直分段数
// @return:
//   void
function CalculatePoints(w:Number, h:Number, hs:Number, vs:Number):void {
    var iw:Number

…

对不起，让大家久等了，继续写blog。

今天我们继续研究位图的任意形变，今天的主要目的就是从外部加载一张图片，然后分割成两个三角形。当然了，分割成两个三角形是远远不够的，这一点，我们在后面会讲到。

从外部加载一张图片很简单，使用Loader类就可以轻松完成了。不过要注意的是这里是Loader类，在包flash.display下，而不是flash.net下的URLLoader类。这个类使用很简单，如下（为了简单，这就不写那些条条框框了，直接写在时间轴上了，所有的代码都在第一帧）：

// 这个是我们要load的图片
var url:String = 'green.jpg';

//这个是用来保存位图数据的
var bmd:BitmapData = null;

// load方法
function Load():void {
    var req:URLRequest = new URLRequest(url);
    var loader:Loader = new

…

转载请注明出处：http://fdream.net，作者：Fdream

由于仿射变换时，平行的边依然平行，所以，我们无法对一个矩形的位图进行随意变换，比如我们无法拉伸一个角，也无法进行把它变成梯形等。在上文中，我们提到过一种思路，就是把矩形分割成两个三角形，这样变换时从表面上看来就没有什么平行边了，这样我们就可以变换其中的一个或者多个角了。注意，我这里说的是从表面上看，这一点在后面的变换中要进行一定的处理的。

这样我们只需要对三个点进行平面变换，假设我们的三个点分别为(x1, y1)、(x2, y2)、(x3, y3)，要变换的位置分别为（x1′,y1′)、(x2′, y2′)、(x3′, y3’）、现在，我们要做的就是计算其变换矩阵。假设其变换矩阵为：

注意，在Flash中，其对应的变换矩阵应该是这个（平移变换的位置略有不同）：

根据…

转载请注明出处：http://fdream.net，作者：Fdream

在Flash/ActionScript中，只提供了仿射变换功能。仿射变换包括平移（x 和 y 重新定位）、旋转、缩放和倾斜，在进行这些形变时，平行线仍然会保持平行，因此没办法做到任意形变。

实现位图或者MC（MovieClip）的任意形变的一种方式就是把它们分割成三角行，然后对三角形进行相应的仿射变换。比较流行的PV3D（papervision3d）就是采用的这种方式。

一切从简单开始，我们先看看一个点在平面上的几个简单的基本变换。一般来说，我们都将平面上的一个点表示为一个1×2的矩阵，我们可以通过将改点乘以一个2×2的矩阵来对该点进行变换。以下是一些简单的示例：

由于平移变换不是线性的，因此不能表示为2×2的矩阵，通过与一个1×2的矩阵相加即可得到相应的平移变换位置。上图中的取镜像变换从某种意义上也可以看做是一种平移变换：

通过上面的一些基本变换方式，我们可以得到一些比较复杂的变换：…