The use of mesh to achieve polygon clipping pictures! Cocos Creator!

Mask and crop images goodbye, and use high-performance mesh + shader. For a complete code for the bottom of the article!

Effect Preview:

Instructions:

1. Create an empty node
2. Add User Script Component mesh-texture-mask
3. add pictures
4. Adding the modified vertex coordinates of the polygon

The principle

create mesh

meshWhat is? meshAn object is to determine the shape of things. For example in two dimensions can be square, circular, triangular and the like; may be a three-dimensional cube, sphere, cylinder and the like.

meshA need to initialize VertexFormatthe object. This object is an object vertex format.

Wherein namecorresponding vertex shader attributevariable value. typeCorresponding to the data type, determines the size of each data.

numThere are several data components corresponding to (guess ha!). For example, two-dimensional coordinates and the texture coordinates uv generally only xand ytwo components, it is set to 2; three-dimensional coordinates have xyzthree variables, the value of 3; and the color generally have rgbafour components, it is set to 4.

normalize It represents normalized.

For our polygon clipping pictures, just a two-dimensional coordinates and a uv texture coordinates, create a meshreference code is as follows:

const gfx = cc.gfx;
let mesh = new cc.Mesh();
mesh.init(new gfx.VertexFormat([
    { name: gfx.ATTR_POSITION, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
    { name: gfx.ATTR_UV0, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
]), this.vertexes.length, true);

Uv texture coordinates calculated

Uv texture coordinates at the upper left, uthe shaft is right, vthe axis downwards, ranges from 0 to 1. Our coordinates in the middle xshaft to the right, yin the axial direction.

So we can first find the x,yproportion in the lower left corner, and then reverse it yaxis, turn into a uvcoordinate system. Reference code as follows.

const vx = (pt.x + this.texture.width / 2 + this.offset.x) / this.texture.width;
const vy = 1.0 - (pt.y + this.texture.height / 2 + this.offset.y) / this.texture.height;

Calculate vertex indices

First need to know a concept, a draw is to draw a plurality of triangular shape actually. It can be split into a plurality of triangular polygons, and the vertex indices tell it how to draw the triangles.

如何将一个多边形切割成多个三角形？可以采用'耳切法'的方式。把多边形的一个耳朵切掉，然后再对剩下的多边形再次切割。

怎么样的耳朵才能切呢？这个耳朵的顶点需要满足是凸顶点且没有其他顶点在这个耳朵里。

如何判断是凸顶点呢？首先要知道向量外积的定义，表示向量的法向量。方向根据右手法则确定，就是手掌立在a、b所在平面的向量a上，掌心由a转向b的过程中，大拇指的方向就是外积的方向。

对于cc.Vec2的外积就是面积，有正负之分，也是根据右手法则确定。

若多边形ABCDEF顶点以逆时针顺序排序的话，AB x BC > 0 表示B点是凸顶点。参考代码如下。

const v1 = p2.sub(p1);
const v2 = p3.sub(p2);
if (v1.cross(v2) >= 0) {
    // 是凸点
}

判断点D是否在三角形ABC内，可以通过外积计算点与线的位置关系判断出。

// 判断一个点是否在三角形内
_testInTriangle(point, triA, triB, triC) {
    let AB = triB.sub(triA), AC = triC.sub(triA), BC = triC.sub(triB), AD = point.sub(triA), BD = point.sub(triB);
    return (AB.cross(AC) >= 0 ^ AB.cross(AD) < 0)  // D,C 在AB同同方向
        && (AB.cross(AC) >= 0 ^ AC.cross(AD) >= 0) // D,B 在AC同同方向
        && (BC.cross(AB) > 0 ^ BC.cross(BD) >= 0); // D,A 在BC同同方向
},

最后把以上综合起来就可以计算出顶点索引。

小结

以上为白玉无冰使用 Cocos Creator v2.2.2 开发"使用 mesh 实现多边形裁剪图片"的技术分享。有想法欢迎留言！如果这篇对你有点帮助，欢迎分享给身边的朋友。

---

参考资料:
多边形分解成三角形算法

---

完整代码
原文链接