绘制六边形
/** 绘制六边形集合并平铺 */
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();
// 绘制当前或已经存在的路径
}
效果如下图