HTML5高級編程之圖形扭曲及其應用二(運用篇)

來源：懂視網責編：小采時間：2020-11-27 15:12:19

HTML5高級編程之圖形扭曲及其應用二(運用篇)

HTML5高級編程之圖形扭曲及其應用二(運用篇):上次介紹了在html5中實現圖片扭曲效果的原理，并擴展成了drawtriangles函數，下面來詳細講解一下drawtriangles函數的使用方法。并且使用drawtriangles函數實現下面這種處理效果因為這個方法是從AS3移植而來，所以它的使用方法和AS3基本一致，這里是AS3

推薦度：

點擊下載本文 文檔為doc格式

導讀HTML5高級編程之圖形扭曲及其應用二(運用篇):上次介紹了在html5中實現圖片扭曲效果的原理，并擴展成了drawtriangles函數，下面來詳細講解一下drawtriangles函數的使用方法。并且使用drawtriangles函數實現下面這種處理效果因為這個方法是從AS3移植而來，所以它的使用方法和AS3基本一致，這里是AS3

上次介紹了在html5中實現圖片扭曲效果的原理，并擴展成了drawtriangles函數，

下面來詳細講解一下drawtriangles函數的使用方法。并且使用drawtriangles函數實現下面這種處理效果

因為這個方法是從AS3移植而來，所以它的使用方法和AS3基本一致，這里是AS3的drawtriangles函數API，大家可以參照一下

http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/flash/display/Graphics.html#drawTriangles()

上次也說明過，移植后的drawtriangles函數，第4個之后的參數的含義不同，在這里它第4個參數表示分割線的線粗，第5個參數則表示分割線的顏色，如果不設定，則不顯示分割線

drawTriangles函數的定義

drawTriangles(vertices, indices, uvtData,thickness,color)
vertices:由數字構成的矢量，其中的每一對數字將被視為一個坐標位置（一個 x, y 對）。vertices 參數是必需的。
indices:一個由整數或索引構成的矢量，其中每三個索引定義一個三角形。
如果 indexes 參數為 null，則每三個頂點（vertices 矢量中的 6 對 x,y）定義一個三角形。否則，每個索引將引用一個頂點，即 vertices 矢量中的一對數字。
例如，indexes[1] 引用 (vertices[2], vertices[3])。
uvtData:由用于應用紋理映射的標準坐標構成的矢量。
每個坐標引用用于填充的位圖上的一個點。每個頂點必須具有一個 UV 或一個 UVT 坐標。對于 UV 坐標，(0,0) 是位圖的左上角，(1,1) 是位圖的右下角。
thickness:分割三角形的邊框的線粗
color:分割三角形的邊框的顏色

直接看上面的文字，恐怕不太容易理解，下面來舉幾個例子，最后兩個參數比較簡單，先來說說這兩個參數，下面是最后兩個參數線寬設置為2，顏色為白色的效果

可以看到，上圖中顯示了三角形的邊框。

好了，接下來說說其他三個參數的用法，

1，第一個參數vertices，其實就是定義每個頂點的坐標，這幾個頂點的順序依次為下圖

vertices參數中儲存的就是上面的9個頂點的坐標，代碼如下

vertices = new Array();
vertices.push(0, 0);
vertices.push(0, 120);
vertices.push(0, 240);
vertices.push(120, 0);
vertices.push(120, 120);
vertices.push(120, 240);
vertices.push(240, 0);
vertices.push(240, 120);
vertices.push(240, 240);

2，第二個參數indices是定義三角形，數組vertices中每三個頂點可以組成一個三角形，indices就是來定義這些三角形，這些三角形的頂點順序是有規定的，其實從前面的圖中可以看到，每兩個三角形是一個矩形，定義這些三角形的時候，要以這些矩形的四個頂點為基準，三角形的頂點順序分別是（左上，右上，左下）和（右上，左下，右下），如下圖所示

對應圖中的三角形，代碼如下

indices = new Array();
indices.push(0, 3, 1);
indices.push(3, 1, 4);
indices.push(1, 4, 2);
indices.push(4, 2, 5);
indices.push(3, 6, 4);
indices.push(6, 4, 7);
indices.push(4, 7, 5);
indices.push(7, 5, 8);

2，第三個參數uvtData是定義上面的每個頂點相對于整張圖片的比例，比如上面的圖中的9個頂點的坐標，他們相對于原圖片中的位置分別為下圖所示

換算成代碼如下

uvtData = new Array();
uvtData.push(0, 0);
uvtData.push(0, 0.5);
uvtData.push(0, 1);
uvtData.push(0.5, 0);
uvtData.push(0.5, 0.5);
uvtData.push(0.5, 1);
uvtData.push(1, 0);
uvtData.push(1, 0.5);
uvtData.push(1, 1);

有了上面這些參數的定義，然后通過LSprite對象的graphics屬性的beginBitmapFill和drawTriangles兩個函數，就可以繪制多樣化的圖形了

beginBitmapFill是用位圖圖像填充繪圖區，參數是LBitmapData對象

如果，在vertices參數中定義的坐標位置就是原圖片中所對應的位置，那么圖片是沒有什么變化的，但是，如果改變這些坐標的位置，比如下面的代碼

vertices = new Array();
vertices.push(0, 0);
vertices.push(0-50, 120);//這里將原坐標的x坐標左移50
vertices.push(0, 240);
vertices.push(120, 0);
vertices.push(120, 120);
vertices.push(120, 240);
vertices.push(240, 0);
vertices.push(240+50, 120);//這里將原坐標的x坐標右移50
vertices.push(240, 240);

indices = new Array();
indices.push(0, 3, 1);
indices.push(3, 1, 4);
indices.push(1, 4, 2);
indices.push(4, 2, 5);
indices.push(3, 6, 4);
indices.push(6, 4, 7);
indices.push(4, 7, 5);
indices.push(7, 5, 8);

uvtData = new Array();
uvtData.push(0, 0);
uvtData.push(0, 0.5);
uvtData.push(0, 1);
uvtData.push(0.5, 0);
uvtData.push(0.5, 0.5);
uvtData.push(0.5, 1);
uvtData.push(1, 0);
uvtData.push(1, 0.5);
uvtData.push(1, 1);
backLayer.graphics.beginBitmapFill(bitmapData);
backLayer.graphics.drawTriangles(vertices, indices, uvtData);

效果如圖