Creator3.x 绘制六边形

 绘制六边形

 
    /** 绘制六边形集合并平铺 */
    private initSexAngles() {
        let _node = new Node();
        _node.parent = find("bg", this.node);
        _node.layer = Layers.Enum.UI_2D;
        _node.position = Vec3.ZERO;
        G.tool.getOrAddCompent(_node, UITransform).contentSize = new Size(600, 600);
        // 添加绘制组件
        let _graphics = G.tool.getOrAddCompent(_node, Graphics) as Graphics;
        _graphics.lineWidth = 2;
        _graphics.strokeColor = new Color(255, 255, 0);
        _graphics.fillColor = new Color(255, 255, 0);
        _graphics.lineJoin = 2;
        _graphics.lineCap = 0;
 
        let _startPos = new Vec3(-300, -300);
        let radius = 50;
        /** 中心点到线段的垂直距离 */
        let halfDis = Math.sqrt(radius * radius - 1 / 2 * radius * 1 / 2 * radius);
        for (let i = 0; i < 10; i++) {
            for (let j = 0; j < 10; j++) {
                let _pos = new Vec3(_startPos.x  +  (1 / 2 + 1) * radius * i, _startPos.y + 2 * halfDis * j + (i % 2 ? halfDis : 0));
                this.calcEachSexAngle(_graphics, _pos, 50);
            }
        }
        _graphics.stroke();
    }
 
    /** 画一个六角形 */
    private calcEachSexAngle(_graphics: Graphics, pos: Vec3 = Vec3.ZERO, radius: number = 50) {
        let angle = 2 * Math.PI;
        let eachAngle = angle / 6;
        /** 中心点到线段的垂直距离 */
        let halfDis = Math.sqrt(radius * radius - 1 / 2 * radius * 1 / 2 * radius);
        // 左上角第一个点;
        _graphics.moveTo(-1 / 2 * radius + pos.x, halfDis + pos.y);
        // 左角
        _graphics.lineTo(-radius + pos.x, pos.y);
        // 左下角
        _graphics.lineTo(-1 / 2 * radius + pos.x, -halfDis + pos.y);
        // 右下角
        _graphics.lineTo(1 / 2 * radius + pos.x, -halfDis + pos.y);
        // 右角
        _graphics.lineTo(radius + pos.x, pos.y);
        // 右上角
        _graphics.lineTo(1 / 2 * radius + pos.x, halfDis + pos.y);
        // 闭合角度
        _graphics.close();
        // 绘制当前或已经存在的路径
    }

效果如下图