Swift實時畫箭頭的實現

iOS上實現畫箭頭，若是是指定了座標點，那是很簡單的，但若是須要作到實時繪製，就須要計算一下了

需求：

在白板上，根據手勢落下點和移動點，實時繪製一條箭頭直線（以下圖）

 

實現代碼：

/// 獲取箭頭的點位置
    ///
    /// - Parameters:
    ///   - fPoint: <#fPoint description#>
    ///   - tPoint: <#tPoint description#>
    /// - Returns: <#return value description#>
    func getArrowPoint(fPoint:CGPoint,tPoint:CGPoint) -> (CGPoint,CGPoint,CGPoint) {
        var p1 = CGPoint.zero           //箭頭點1
        var p2 = CGPoint.zero           //箭頭點2
        var p3 = CGPoint.zero           //箭頭最前面點
        //假設箭頭邊長20,箭頭是一個等腰三角形
        let line = sqrt(pow(fabs(tPoint.x-fPoint.x), 2)+pow(fabs(tPoint.y-fPoint.y), 2))
        let arrowH:CGFloat = line>40 ? 20 : line/3
        //線與水平方向的夾角
        let angle = getAnglesWithThreePoints(p1: fPoint, p2: tPoint, p3: CGPoint(x: fPoint.x, y: tPoint.y))
        let _x = CGFloat(fabs(sin(angle)))*arrowH/2
        let _y = CGFloat(fabs(cos(angle)))*arrowH/2
        //向右上角、水平向右
        if tPoint.x >= fPoint.x && tPoint.y <= fPoint.y{
            p1.x = tPoint.x-_x
            p1.y = tPoint.y-_y
            
            p2.x = tPoint.x+_x
            p2.y = tPoint.y+_y
            
            p3.x = tPoint.x+_y*2
            p3.y = tPoint.y-_x*2
            
        }else if tPoint.x > fPoint.x && tPoint.y > fPoint.y{
            //向右下角
            p1.x = tPoint.x+_x
            p1.y = tPoint.y-_y
            
            p2.x = tPoint.x-_x
            p2.y = tPoint.y+_y
            
            p3.x = tPoint.x+_y*2
            p3.y = tPoint.y+_x*2
        }else if tPoint.x < fPoint.x && tPoint.y < fPoint.y{
            //向左上角
            p1.x = tPoint.x-_x
            p1.y = tPoint.y+_y
            
            p2.x = tPoint.x+_x
            p2.y = tPoint.y-_y
            
            p3.x = tPoint.x-_y*2
            p3.y = tPoint.y-_x*2
            
        }else if tPoint.x < fPoint.x && tPoint.y >= fPoint.y{
            //向左下角,水平向左
            p1.x = tPoint.x-_x
            p1.y = tPoint.y-_y
            
            p2.x = tPoint.x+_x
            p2.y = tPoint.y+_y
            
            p3.x = tPoint.x-_y*2
            p3.y = tPoint.y+_x*2
        }else if fPoint.x==tPoint.x {
            //豎直方向
            p1.x=tPoint.x-arrowH/2
            p1.y=tPoint.y
            p2.x=tPoint.x+arrowH/2
            p2.y=tPoint.y
            p3.x=tPoint.x
            p3.y = tPoint.y>fPoint.y ? tPoint.y+arrowH : tPoint.y-arrowH
        }
        
        return (p1,p2,p3)
    }

 

其中，獲取夾角方法：getAnglesWithThreePoints

/// 計算三點之間的角度
    ///
    /// - Parameters:
    ///   - p1: 點1
    ///   - p2: 點2（也是角度所在點）
    ///   - p3: 點3
    /// - Returns: 角度（180度制）
    func getAnglesWithThreePoints(p1:CGPoint,p2:CGPoint,p3:CGPoint) -> Double {
        //排除特殊狀況，三個點一條線
        if (p1.x == p2.x && p2.x == p3.x) || ( p1.y == p2.x && p2.x == p3.x){
            return 0
        }
        
        let a = fabs(p1.x - p2.x)
        let b = fabs(p1.y - p2.y)
        let c = fabs(p3.x - p2.x)
        let d = fabs(p3.y - p2.y)
        
        if (a < 1.0 && b < 1.0) || (c < 1.0 && d < 1.0){
            return 0
        }
        let e = a*c+b*d
        let f = sqrt(a*a+b*b)
        let g = sqrt(c*c+d*d)
        let r = Double(acos(e/(f*g)))
        return r        //弧度值
        
//        return (180*r/Double.pi)      //角度值

    }

View Code

 

最後獲得三個點，即箭頭的三個點座標