getMousePosition.js 832 Bytes
//計算滑鼠位置,以canvas中心為原點,區分四個象限,座標值介於 0-1 之間
export const getMousePosition = (event, container) => {
    let rect = container.getBoundingClientRect();
    let mouse = { x: 0, y: 0 };
    mouse.x = ((event.clientX - rect.left) / (rect.right - rect.left)) * 2 - 1;
    mouse.y = - ((event.clientY - rect.top) / (rect.bottom - rect.top)) * 2 + 1;
    return mouse;
}

//計算滑鼠螢幕座標系位置,以canvas左上角為原點,往右為x座標正值,往下為y座標正值
export const getMouseScreenPosition = (mouse, container) => {
    let rect = container.getBoundingClientRect();
    let client = {
        x: (mouse.x + 1) * 0.5 * (rect.right - rect.left) + rect.left,
        y: -(mouse.y - 1) * 0.5 * (rect.bottom - rect.top) + rect.top
    }
    return client;
}