Lufylegend: Graphics deformation 2

Here is a detailed explanation of how the Drawtriangles function is used. and use the Drawtriangles function to achieve the following processing effect

Because this method is transplanted from AS3, so its use and AS3 basically consistent, here is AS3 Drawtriangles function API, we can refer to

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

Last time also explained, after the transplanted drawtriangles function, the meaning of the parameter after the 4th is different, here its 4th parameter represents the line thickness of the split line, the 5th parameter represents the split line color, if not set, does not display the split line

Definition of the Drawtriangles function

[HTML]View Plaincopyprint?

1. drawtriangles (vertices, indices, uvtdata,thickness,color)    
2. vertices: a vector of numbers in which each pair of numbers is treated as a coordinate position (a  x, y  pair). The vertices  parameter is required.   
3. indices: a vector of integers or indexes in which each three index defines a triangle. If the  indexes  parameter is  null, a triangle is defined for each of the three vertices ( 6  to  x,y in the vertices  vector). Otherwise, each index will refer to a vertex, which is a pair of numbers in the  vertices  vector. For example,indexes[1]  reference   (Vertices[2], vertices[3]).   
4. uvtdata: A vector of standard coordinates used to apply a texture map. Each coordinate reference is used to fill a point on the bitmap. Each vertex must have a  UV  or a  UVT  coordinate. For  UV  coordinates, (0,0)   is the upper-left corner of the bitmap, (+)   is the lower-right corner of the bitmap.   
5. thickness: the line thickness of the border of the split triangle   
6. color: The color    of the border of the split triangle;

Drawtriangles (vertices, indices, uvtdata,thickness,color) vertices: a vector of numbers in which each pair of numbers is treated as a coordinate position (an X, y pair). The vertices parameter is required. Indices: A vector of integers or indexes in which each three index defines a triangle. If the indexes parameter is NULL, a triangle is defined for every three vertices (6 pairs x, y in the vertices vector). Otherwise, each index will refer to a vertex, which is a pair of numbers in the vertices vector. For example, Indexes[1] references (vertices[2], vertices[3]). Uvtdata: A vector of standard coordinates used to apply a texture map. Each coordinate reference is used to fill a point on the bitmap. Each vertex must have one UV or one UVT coordinate. For UV coordinates, (0,0) is the upper-left corner of the bitmap, which is the lower-right corner of the bitmap. Thickness: Dividing the border of a triangle by a line of coarse color: the color of the border of a split triangle

Directly look at the above text, I am afraid it is not easy to understand, the following to give a few examples, the last two parameters are relatively simple, first of all, the two parameters, the following is the last two parameters line width set to 2, color is white effect

You can see that the border of the triangle is displayed.

OK, now let's talk about the usage of the other three parameters,

1, the first parameter vertices, is actually defines the coordinates of each vertex, the order of these vertices is

The vertices parameter stores the coordinates of the top 9 vertices, the code is as follows

[JavaScript]View Plaincopyprint?

1. vertices = new Array ();
2. Vertices.push (0, 0);
3. Vertices.push (0, 120);
4. Vertices.push (0, 240);
5. Vertices.push (120, 0);
6. Vertices.push (120, 120);
7. Vertices.push (120, 240);
8. Vertices.push (240, 0);
9. Vertices.push (240, 120);
10. Vertices.push (240, 240);

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

2, the second parameter indices is a definition triangle, the array vertices each three vertices can form a triangle, indices is to define these triangles, the vertex order of these triangles is specified, in fact, from the previous figure can be seen, every two triangles is a rectangle, When defining these triangles, to base the four vertices of these rectangles, the triangle's vertex order is (upper left, upper right, bottom left) and (upper right, bottom left, bottom right), as shown in

corresponding to the triangle in the diagram, the code is as follows

[JavaScript]View Plaincopyprint?

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

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

2, the third parameter, Uvtdata, defines the ratio of each vertex above to the entire picture, such as the coordinates of the 9 vertices in the above figure, as shown in their position relative to the original picture.

Converted into code as follows

[JavaScript]View Plaincopyprint?

1. Uvtdata = new Array ();
2. Uvtdata.push (0, 0);
3. Uvtdata.push (0, 0.5);
4. Uvtdata.push (0, 1);
5. Uvtdata.push (0.5, 0);
6. Uvtdata.push (0.5, 0.5);
7. Uvtdata.push (0.5, 1);
8. Uvtdata.push (1, 0);
9. Uvtdata.push (1, 0.5);
10. Uvtdata.push (1, 1);

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);

With these parameters defined above, and then through the Lsprite object's Graphics property of the Beginbitmapfill and drawtriangles two functions, you can draw a variety of graphics

Beginbitmapfill is to populate the plot area with a bitmap image, and the parameter is a Lbitmapdata object

If the coordinate position defined in the vertices parameter is the corresponding position in the original picture, then there is no change in the picture, but if you change the position of the coordinates, such as the following code

[JavaScript]View Plaincopyprint?

2. vertices = new Array ();
4. Vertices.push (0, 0);
6. Vertices.push (0-50, 120); //This will shift the X coordinate of the original coordinate to the left
8. Vertices.push (0, 240);
10. Vertices.push (120, 0);
12. Vertices.push (120, 120);
14. Vertices.push (120, 240);
16. Vertices.push (240, 0);
18. Vertices.push (240+50, 120); //This will shift the x-coordinate of the original coordinate to the right
20. Vertices.push (240, 240);
24. indices = new Array ();
26. Indices.push (0, 3, 1);
28. Indices.push (3, 1, 4);
30. Indices.push (1, 4, 2);
32. Indices.push (4, 2, 5);
34. Indices.push (3, 6, 4);
36. Indices.push (6, 4, 7);
38. Indices.push (4, 7, 5);
40. Indices.push (7, 5, 8);
44. Uvtdata = new Array ();
46. Uvtdata.push (0, 0);
48. Uvtdata.push (0, 0.5);
50. Uvtdata.push (0, 1);
52. Uvtdata.push (0.5, 0);
54. Uvtdata.push (0.5, 0.5);
56. Uvtdata.push (0.5, 1);
58. Uvtdata.push (1, 0);
60. Uvtdata.push (1, 0.5);
62. Uvtdata.push (1, 1);
64. BackLayer.graphics.beginBitmapFill (BitmapData);
66. BackLayer.graphics.drawTriangles (vertices, indices, uvtdata);

vertices = new Array (); Vertices.push (0, 0); Vertices.push (0-50, 120);//The x-coordinate of the original coordinates is shifted to the left 50vertices.push (0, 240); Vertices.push (0); Vertices.push (+), Vertices.push (+), Vertices.push (0); Vertices.push (240+50, 120);//The x-coordinate of the original coordinates is shifted to the right 50vertices.push (+); 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);

Effect

The above deformation is to divide the picture into 8 triangles, in order to achieve a more variety of deformation, it is necessary to split the image into more small triangles can be

For example, I use this function to create a primitive image retouching tool, the effect is as follows

Lufylegend: Graphics deformation 2