js屏幕坐標轉換

/**
 * 原點坐標
 * @property {number} x
 * @property {number} y
 */
export interface OriginPoint{
    x: number;
    y: number;
}

/**
 *  已知某一點坐標,旋轉角度,長度,求另一點坐標
 *  @param originPoint 原點坐標
 *  @param {number} degree 旋轉角度
 *  @param {number} len 長度
 *  @return {OriginPoint} 另一點坐標
 */
export const calculateCoordinatePoint = (originPoint: OriginPoint, degree: number, len: number): OriginPoint => {
    let rotate: number = (degree - 90 + 360) % 360; //這里是因為一開始以y軸下方為0度的
    let point: OriginPoint = {
        x: len,
        y: 0
    };
    //計算某一點旋轉后的坐標點,這里假設傳入的點為原點
    let relativeOriginPoint: OriginPoint = calculateRotate(point, rotate);
    //計算相對坐標系的坐標
    return calculateCoordinateRelativePoint(originPoint, relativeOriginPoint);
};


/**
 * 計算某一點旋轉后的坐標點
 * @param {OriginPoint} point 原點坐標
 * @param {number} degree 旋轉角度
 * @return {OriginPoint}
 */
export const calculateRotate = (point: OriginPoint, degree: number): OriginPoint => {
    let x: number = point.x * Math.cos(degree * Math.PI / 180) + point.y * Math.sin(degree * Math.PI / 180);
    let y: number = -point.x * Math.sin(degree * Math.PI / 180) + point.y * Math.cos(degree * Math.PI / 180);
    return {
        x: Math.round(x * 100) / 100,
        y: Math.round(y * 100) / 100
    };
};


/**
 * 計算相對坐標系的坐標
 * @param {OriginPoint} origin 原點坐標
 * @param {OriginPoint} relativeOriginPoint 相對原點坐標
 */
export const calculateCoordinateRelativePoint = (origin, relativeOriginPoint): OriginPoint => {
    let x = relativeOriginPoint.x + origin.x;
    let y = relativeOriginPoint.y + origin.y;
    return {
        x: Math.round(x * 100) / 100,
        y: Math.round(y * 100) / 100
    };
};

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容