View內(nèi)部|通過三點(diǎn)繪制圓弧

過矩形3點(diǎn)繪制圓弧

如上圖所示,綠色矩形就是我們要繪制圓弧的區(qū)域,咖啡色的圓弧就是我們要繪制的效果。
控制點(diǎn)M controPoint是D、C兩個(gè)點(diǎn)處引出切線的交點(diǎn)

示例代碼是swift,但數(shù)學(xué)公式是共通的,bezier path 是平臺(tái)無關(guān)的
iOS平臺(tái)A點(diǎn)坐標(biāo)為(0,0), C點(diǎn)坐標(biāo)為(width, carve_h), M點(diǎn)y坐標(biāo)為負(fù)數(shù)

override func initUI() {
      
        let width = ScreenWidth()
        // 藍(lán)色header內(nèi),白色圓弧計(jì)算path
        let curve_h: CGFloat = 20  // curve_view.heght = 20
        let controlPoint = getControlPointFrom(bounds: CGRect(x: 0, y: 0, width: width, height: curve_h))
        //
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: curve_h))
        path.addQuadCurve(to: CGPoint(x: width, y: curve_h), controlPoint: controlPoint)
        path.close()
        let fillCurve = CAShapeLayer()
        fillCurve.frame = CGRect(x: 0, y: 0, width: width, height: curve_h)
        fillCurve.path = path.cgPath
        fillCurve.fillColor = UIColor.white.cgColor
        fillCurve.lineWidth = 0
        curve_view.layer.insertSublayer(fillCurve, at: 0)
    }

注意:設(shè)View的寬為width,高為height,必須滿足height <= width/2,才存在通過指定的三點(diǎn)的圓。

// 在View.bounds內(nèi)繪制一段圓弧,從左下角開始,經(jīng)過上邊中點(diǎn),到右下角。三點(diǎn)確定一個(gè)圓。
    func getControlPointFrom(bounds: CGRect) -> CGPoint {
        let width = bounds.size.width
        let curve_h = bounds.size.height
        // 計(jì)算curve_view內(nèi)圓弧的半徑(圓弧過3點(diǎn),(0, curve_h), (width/2, 0), (width, curve_h))
        let radius_f = ((curve_h*curve_h) + (width/2)*(width/2))/(2*curve_h)
        let cosValue = (width/2)/CGFloat(radius_f)         // 余弦值
        // 求角度(curve_view底邊和半徑夾角)
        let sista1 = acosf(Float(cosValue))
        let sista2 = Float.pi/2 - sista1
        let distance = tanf(sista2)*(Float(width/2))
        let controlY = curve_h - CGFloat(distance)
        return CGPoint(x: width/2, y: controlY)
    }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容