如何判斷一個點在旋轉後的矩形中

前言

最近在作的一款遊戲中，用到點與旋轉矩形的斷定來得到一個選中的物體。在此作個記錄

如圖所示，黃色的顏料屏是旋轉的，若是不作處理直接判斷點是否在矩形中，那麼點擊紅點的位置會斷定爲選中物體。顯然這是不對的。
若是物體沒有旋轉，判斷方法就很簡單了。

static isPositionInRect(point: cc.Vec2, rect: cc.Rect) {
        return point.x <= rect.x + rect.width/2 && point.x >= rect.x  - rect.width/2 && point.y <= rect.y + rect.height /2&& point.y >= rect.y - rect.height /2;
    }

我這個矩形錨點爲爲(0.5,0.5)，若是錨點不是(0.5,0.5）能夠自行修改。
可是判斷一個點在旋轉後的矩形中就沒有這麼簡單了。

怎麼判斷呢？

1. 首先我想到的是WebGL編程指南第92頁講到的內容。(x,y)在旋轉O角度後獲得(x2,y2)

x2 = x * cos(O) - y * sin(O)
 y2 = x * sin(O) + y * cos(O)

2. 獲得了這個公式，咱們接下來就是要旋轉觸摸點了。不過這個時候咱們要肯定要繞哪一個點旋轉，是座標系的原點嗎？不是的，而是咱們要碰撞的矩形的中心點，由於矩形是繞這個點旋轉的。
   

3. 最終咱們獲得一個完整的斷定函數

/**
     * 判斷點是否在旋轉後的矩形中
     * @param point 觸摸點的座標
     * @param node 碰撞節點，錨點必須爲(0.5,0.5)
     */
    static isPosInRotationRect(point: cc.Vec2, node: cc.Node) {
        let hw = node.width / 2;
        let hh = node.height / 2
        let O = node.angle;
        let center = node.position;
        let X = point.x
        let Y = point.y
        let r = -O * (Math.PI / 180)
        let nTempX = center.x + (X - center.x) * Math.cos(r) - (Y - center.y) * Math.sin(r);
        let nTempY = center.y + (X - center.x) * Math.sin(r) + (Y - center.y) * Math.cos(r);
        if (nTempX > center.x - hw && nTempX < center.x + hw && nTempY > center.y - hh && nTempY < center.y + hh) {
            return true;
        }
        return false
    }

4. 這裏邊須要注意的是角度O咱們用的是反方向的。由於咱們斷定使用的矩形的座標和寬高是未旋轉的，也就是下圖的紅色框。因此咱們的觸摸點須要反方向旋轉角度O才能使用以前的斷定方法。
   
   當你點擊了1的位置，通過反方向的旋轉後會到達2的位置，而後與紅色框的矩形判斷，纔會獲得正確的斷定結果。若是觸摸點旋轉的角度與矩形旋轉的角度相同，那麼點擊1的位置就會向左移動，也會斷定爲選中，就會獲得不正確的結果了。

結語

以上就是如何斷定一個點在旋轉後的矩形中的一種方式。在網上搜索的時候發現有不少種實現方式，可是感受都比較繁瑣。有興趣的小夥伴能夠本身去研究研究。不過用我這個斷定函數已經能夠達到目的了。

參考

1. https://www.jianshu.com/p/bde70668b1bc
2. https://www.deanhan.cn/js-point-in-rotate-rect.html
3. https://blog.csdn.net/C_panpan/article/details/50476965?utm_source=blogxgwz1

長按下方二維碼，關注《微笑遊戲》公衆號，獲取更多精彩內容。

歡迎掃碼關注公衆號《微笑遊戲》，瀏覽更多內容。