typescript实现四叉树

在2d场景里，可以用四叉树进行元素管理。

本文基于ts，实现了一个四叉树。

目前只有初始化构建和查询附近元素的功能。

基元类型

interface ItemTypeI {
    x: number;
    y: number;
    width:number;
    height:number;
}

想要被该四叉树管理，需要元素具备坐标，大小的相关属性。

因为初始化构建的时候，会直接用坐标来划分区域。然后在查找附近元素的时候，会用大小来进行四叉树节点扩大。 

四叉树节点类

class QuadTreeNode<ItemType> {
    constructor(x: number, y: number, width: number, height: number, level: number) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.level = level;
    }
    public children: QuadTreeNode<ItemType>[] = [];
    public itemArray: ItemType[] = [];
    public readonly x;
    public readonly y;
    public readonly width;
    public readonly height;
    public readonly level;
}

初始化四叉树

核心递归代码：

    private setChildren(quadTreeNode: QuadTreeNode<ItemType>, itemArray: ItemType[]) {
        const halfW = quadTreeNode.width / 2;
        const halfH = quadTreeNode.height / 2;
        itemArray.forEach(item => {
            if (this.isPointInQuadTreeNode(item.x, item.y, quadTreeNode)) {
                quadTreeNode.itemArray.push(item);
            }
        });
        if (quadTreeNode.itemArray.length > 0) {
            if (quadTreeNode.level < this.config.maxLevel) {
                this.aroundOri.forEach(([dx, dy]) => {
                    const childQuadTreeNode = new QuadTreeNode<ItemType>(
                        quadTreeNode.x + (dx * halfW) / 2,
                        quadTreeNode.y + (dy * halfH) / 2,
                        halfW,
                        halfH,
                        quadTreeNode.level + 1
                    );
                    quadTreeNode.children.push(childQuadTreeNode);
                    this.setChildren(childQuadTreeNode, quadTreeNode.itemArray);
                });
                quadTreeNode.itemArray.length = 0;
            }
        }
    }

 如果元素的坐标在四叉树节点的范围，则将元素加入节点。如果最后节点的元素量大于0，并且节点不是叶子节点。则将节点再划分四块。将元素分配如四个节点。依次直到将所有元素划入叶子节点。

查找附近元素

private getNearItemArray(quadTreeNode: QuadTreeNode<ItemType>, pos: Vec3 | Vec2,width:number,height:number, out: ItemTypeI[]) {
        this.toolRect1.set(pos.x - width/2, pos.y - height/2, width, height);
        const oW = quadTreeNode.width + width;
        const oH = quadTreeNode.height + height;
        this.toolRect2.set(quadTreeNode.x - oW / 2, quadTreeNode.y - oH / 2, oW, oH);
        const isInterset = Intersection2D.rectRect(this.toolRect1, this.toolRect2);
        if (isInterset && quadTreeNode.itemArray.length > 0) {
            out.push(...quadTreeNode.itemArray);
        } else {
            for (let i = 0; i < quadTreeNode.children.length; i++) {
                this.getNearItemArray(quadTreeNode.children[i], pos,width,height, out);
            }
        }
    }

同样是递归，判断给的判定区域是否和节点区域相交。这里使用了传入的区域大小进行松散判断的方法。