判断一个点是否在三角形内(向量&向量叉乘)

向量叉乘代码实现

点A&B坐标: A(x1, y1) B(x2, y2)
向量: AB= (x2-x1, y2-y1)
向量叉乘: A * B = x1 * y2 - x2 * y1

interface Coordinate {
    x: number
    y: number
}

// 两个坐标点间向量
function vector(startPoint: Coordinate, endPoint: Coordinate): Coordinate {
    return {
        x: endPoint.x - startPoint.x,
        y: endPoint.y - startPoint.y
    }
}

// 二维向量叉乘
function vectorForkMultiplication(startVector: Coordinate, endVector: Coordinate): number {
    return startVector.x * endVector.y - endVector.x * startVector.y;
}

// 判断两数符号是否相同
function sameSymbol(num1: number, num2: number): boolean {
    return (num1 ^ num2) >= 0
}

// 目标点是否在三角形内
function insideTheTriangle(targetPoint: Coordinate, triangleA:Coordinate,triangleB:Coordinate,triangleC:Coordinate): boolean {
    let pa = vector(targetPoint, triangleA)
    let pb = vector(targetPoint, triangleB)
    let pc = vector(targetPoint, triangleC)

    let vpab = vectorForkMultiplication(pa, pb)
    let vpbc = vectorForkMultiplication(pb, pc)
    let vpca = vectorForkMultiplication(pc, pa)

    return sameSymbol(vpab, vpbc) && sameSymbol(vpbc, vpca)
}

应用场景描述

菜单组件的用户行为预测

需求: 鼠标在一级菜单上下移动来切换不同的定位二级菜单显示隐藏
问题: 用户想移动到二级菜单上,只能在当前一级菜单平移到二级菜单中,不然会因为滑入其他一级菜单导致二级菜单发生相应改变
解决: 对于一级菜单的鼠标滑入事件做防抖处理

问题: 加入防抖处理后,用户在想切换二级菜单时会有顿挫感
需求: 在切换二级菜单时不触发防抖逻辑，在需要移动到二级菜单时触发防抖
解决: 通过鼠标在一级菜单第一次的坐标点(A)跟二级菜单的在页面(B,C)坐标点组成一个三角区域,再监听鼠标移动的P点是否在三角形区域内,如果在内则可认为用户想移动到二级菜单触发防抖,反之亦然

后记

个人博客 | Botaoxy (chengbotao.github.io)
chengbotao (Chengbotao) (github.com)

感谢阅读,敬请斧正!