平滑的UIBezierPath [英] Smooth UIBezierPath

问题描述

我在操场上创建了一个uibezierpath手动添加值，并且效果很好。结果是：

I created in a playground a uibezierpath added manually values and it works fine. The results is :

现在，我的目标是使曲线平滑并消除这些尖锐的角。我在考虑插值功能，但不确定。在我的实际代码下面：

Now my goal is to smooth the curve and remove these "sharp" corners. I'm thinking on a interpolation function but not sure. Below my actual code :

//: Playground - noun: a place where people can play

import Foundation
import UIKit
import CoreGraphics
import QuartzCore

class DemoView: UIView {


    override func draw(_ rect: CGRect) {
        let origin = CGPoint(x: frame.size.width / 2, y: frame.size.height / 2)
        let radius = frame.size.width / 2

//        self.createCircle(origin: origin, radius: radius)
        self.addLinesInCircle(origin: origin, radius: radius)
    }

    func createCircle(origin: CGPoint, radius: CGFloat) {
        let path = UIBezierPath()
        path.addArc(withCenter: origin, radius: radius, startAngle: 0, endAngle: CGFloat(2 * Double.pi), clockwise: true)
        path.close()
        UIColor.clear.setFill()
        path.fill()
    }

    func addLinesInCircle(origin: CGPoint, radius: CGFloat) {
        let bezier = UIBezierPath()

        let incrementAngle: CGFloat = CGFloat.pi / 24
        let ratios: [CGFloat] = [3/6, 5/6, 3/6, 1/6, 5/6, 2/6, 4/6, 2/6, 4/6, 4/6, 4/6, 4/6,
                                 3/6, 5/6, 3/6, 1/6, 5/6, 2/6, 4/6, 2/6, 4/6, 4/6, 4/6, 4/6,
                                 3/6, 5/6, 3/6, 1/6, 5/6, 2/6, 4/6, 2/6, 4/6, 4/6, 4/6, 4/6,
                                 3/6, 5/6, 3/6, 1/6, 5/6, 2/6, 4/6, 2/6, 4/6, 4/6, 4/6, 4/6]

        for (index, ratio) in ratios.enumerated() {
            let point = CGPoint(x: origin.x + cos(CGFloat(index) * incrementAngle) * radius * ratio,
                                y: origin.y + sin(CGFloat(index) * incrementAngle) * radius * ratio)
            if index == 0 {
                bezier.move(to: point)
            } else {
                bezier.addLine(to: point)
            }
        }

        bezier.close()


        let gradient = CGGradient(colorsSpace: nil, colors: [UIColor.red.cgColor,UIColor.blue.cgColor,UIColor.yellow.cgColor ,UIColor.black.cgColor] as CFArray, locations: nil)!

        let ctx = UIGraphicsGetCurrentContext()!
             ctx.saveGState()

        // Clip to the path
        bezier.addClip()
        // Draw the gradient in the clipped region
        ctx.drawLinearGradient(gradient, start: CGPoint(x: 0, y: 0), end: CGPoint(x: 0, y: frame.height), options: [])

        ctx.restoreGState()

    }

}

let demoView = DemoView(frame: CGRect(x: 0, y: 0, width: 1000, height: 1000))

如果有人有主意或只是为了正确方向寻找关键词？在此先感谢您的帮助。我希望我的解释足够了...

If anyone has an idea or just keys words in order to look in the right direction? Thanks in advance for your help. I hope my explanations are enough...

推荐答案

使用二次曲线的插值如下：

Interpolation using quadratic curve is like below:

    func
    MidPoint( _ l: CGPoint, _ r: CGPoint ) -> CGPoint { return CGPoint( x: ( l.x + r.x ) / 2, y: ( l.y + r.y ) / 2 ) }
    var start = CGPoint( x: 0, y: 0 )
    var prev = CGPoint( x: 0, y: 0 )
    for (index, ratio) in ratios.enumerated() {
        let point = CGPoint(x: origin.x + cos(CGFloat(index) * incrementAngle) * radius * ratio,
                            y: origin.y + sin(CGFloat(index) * incrementAngle) * radius * ratio)
        switch index {
        case  0:
            start = point
        case  1:
            bezier.move( to: MidPoint( start, point ) )
            prev = point
        default:
            bezier.addQuadCurve( to: MidPoint( prev, point ), controlPoint: prev )
            prev = point
        }
    }
    bezier.addQuadCurve( to: MidPoint( prev, start ), controlPoint: prev )

这篇关于平滑的UIBezierPath的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！