HTML5 高度なプログラミング グラフィックの歪みとその応用 2 (応用編)

前回はHTML5で画像の歪み効果を実現する原理を紹介し、それをdrawtriangles関数に拡張しました

drawtriangles関数の使い方を詳しく説明しましょう。 そして、drawtriangles関数を使用して以下の処理効果を実現します

このメソッドはAS3から移植されているため、その使い方は基本的にAS3のdrawtriangles関数APIです。

http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/flash/display/Graphics.html#drawTriangles()を参照してください

前回説明したように、移植後のdrawtriangles関数、 4番目以降のパラメータの意味が異なります。ここで、4番目のパラメータは分割線の太さを表し、5番目のパラメータは分割線の色を表します。設定されていない場合、分割線は表示されません

。関数の定義

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 つのパラメータについては、まず次のとおりです。最後の 2 つのパラメータの線幅の設定は 2 で、色は白です。上の図では三角形の境界線が表示されています。

他の 3 つのパラメーターの使用法について説明します

1. 最初のパラメーターの頂点は、実際に各頂点の座標を定義します。

上記の 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. 2 番目のパラメーターのインデックスは、三角形を定義するために使用されます。実際、前の図からわかるように、これらの三角形を定義するときは、これらの長方形の 4 つの頂点を基準として使用する必要があります。三角形の頂点 下の図に示すように、(左上、右上、左下) と (右上、左下、右下) です

の三角形に対応します。画像のコードは次のとおりです

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、3 番目のパラメーター 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オブジェクトのグラフィックス属性のbeginBitmapFillとdrawTrianglesの2つの関数を通して、さまざまなグラフィックを描画できます

beginBitmapFill は描画領域をビットマップ画像で塗りつぶします。パラメータは LBitmapData オブジェクトです

vertices パラメータで定義された座標位置が元の画像内の対応する位置である場合、画像は変更されませんただし、次のコードのようにこれらの座標の位置を変更すると、効果は次のようになります

上記の変形は、画像を 8 つの三角形に分割することだけです。画像をさらに小さな三角形に分割する必要があります

たとえば、私はこの機能を使用して簡単な画像修正ツールを作成しました。効果は次のとおりです

下のリンクをクリックしてください効果をテストするには

http://lufylegend.com/html5/lufylegend/ps.html

転載の際は明記してください: lufy_legendのブログより転載

備考:

drawtrianglesを使用するにはこの機能を使用するには、HTML5 オープンソース エンジン lufylegend のバージョン 1.5 以降をダウンロードする必要があります。lufylegend バージョン 1.5 のリリース アドレスは次のとおりです

http://blog.csdn.net/lufy_legend/article/details/8054658

上記は HTML5 高度なプログラミング グラフィック歪みとその応用 II (応用編) の内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) をご覧ください。