分享：web上cc.Graphics的非零环绕填充代码（native没实现）

Creator 2.x
#1

从 cc.Graphics 如何画一个环形？ 继续讨论：
creator2.3，使用自定义engine，engine里 npm安装 Tess2
红色是当前的版本，灰色是非零环绕版本。苦苦寻找了好久还是得自力更生

engine下cocos2d/core/renderer/webgl/assemblers/graphics/index.js
const Tess2 = require(‘tess2’);
。。。
_expandFill (graphics) {
let impl = graphics._impl;

    let paths = impl._paths;

    // Calculate max vertex usage.
    let cverts = 0;
    for (let i = impl._pathOffset, l = impl._pathLength; i < l; i++) {
        let path = paths[i];
        let pointsLength = path.points.length;

        cverts += pointsLength;
    }

    let buffer = this.genBuffer(graphics, cverts),
        meshbuffer = buffer.meshbuffer,
        vData = meshbuffer._vData,
        iData = meshbuffer._iData; 

    let pathPoints = [];//yuxy
     
    for (let i = impl._pathOffset, l = impl._pathLength; i < l; i++) {
        let path = paths[i];
        let pts = path.points;
        let pointsLength = pts.length;

        if (pointsLength === 0) {
            continue;
        }
        //yuxy//////////
        let tempPoints = [];
        for (let j = 0; j < pointsLength; ++j) { 
            tempPoints.push(pts[j].x); 
            tempPoints.push(pts[j].y); 
        }
        pathPoints.push(tempPoints); 
        ///////////////*/
        
       
        /*///////////////
        // Calculate shape vertices.
        let offset = buffer.vertexStart; 

        for (let j = 0; j < pointsLength; ++j) {
            this._vset(pts[j].x, pts[j].y);
        }

        let indicesOffset = buffer.indiceStart;

        if (path.complex) {
            let earcutData = [];
            for (let j = offset, end = buffer.vertexStart; j < end; j++) {
                let vDataOffset = j * 3;
                earcutData.push(vData[vDataOffset]); 
                earcutData.push(vData[vDataOffset+1]); 
            }

            let newIndices = Earcut(earcutData, null, 2);

            if (!newIndices || newIndices.length === 0) {
                continue;
            }

            for (let j = 0, nIndices = newIndices.length; j < nIndices; j++) {
                iData[indicesOffset++] = newIndices[j] + offset;
            }
        }
        else {
            let first = offset;
            for (let start = offset+2, end = buffer.vertexStart; start < end; start++) {
                iData[indicesOffset++] = first;
                iData[indicesOffset++] = start - 1;
                iData[indicesOffset++] = start;
            }
        }

        buffer.indiceStart = indicesOffset;
        //////////////*/

    }
    
    //yuxy//////////////////////// 
    // Tesselate
    let  res = Tess2.tesselate({
        contours: pathPoints,
        windingRule: Tess2.WINDING_NONZERO,
        elementType: Tess2.POLYGONS,
        polySize:3,
        vertexSize: 2
    });  
    ////////////////
    // // Use vertices
    let offset = buffer.vertexStart; 
    for (var i = 0; i < res.vertices.length; i += 2) {
        this._vset(res.vertices[i], res.vertices[i+1]);
    }
    let indicesOffset = buffer.indiceStart;
    // Use triangles
    for (var i = 0; i < res.elements.length; i += 3) {
        var a = res.elements[i]+offset, b = res.elements[i+1]+offset, c = res.elements[i+2]+offset; 
        iData[indicesOffset++] = a;
        iData[indicesOffset++] = b;
        iData[indicesOffset++] = c;
    } 
    buffer.indiceStart = indicesOffset;
    ////////////////////////////////
}

  • Creator 版本：

  • 目标平台：

  • 详细报错信息，包含调用堆栈：

  • 重现方式：

  • 之前哪个版本是正常的 ：

  • 手机型号 ：

  • 手机浏览器 ：

  • 编辑器操作系统 ：

  • 编辑器之前是否有其它报错 ：

  • 出现概率：

  • 额外线索：

#2

大佬 这个偶现填充错误呢 图示如下
image
边框颜色是黑色，推测出线的黑色是这个