Нарисуйте волны между 2 точками с помощью UIBezierPath - PullRequest
Новая
       67

Нарисуйте волны между 2 точками с помощью UIBezierPath

0 голосов
/ 10 января 2019

Я пытаюсь дать UITableViewCell «волнообразное» дно, чтобы оно выглядело как эффект «сорванной бумаги» (для получения заказа). Я хочу нарисовать это по всей длине ячейки.

Я нашел это решение для StackOverflow, которое создает один синус между двумя точками.

Я пытался изменить этот код, чтобы получить нужный эффект (я знаю, что в моем коде много неправильного): 

    let path = UIBezierPath()
     let origin = CGPoint(x: 0, y: bounds.size.height / 2)
     path.move(to: origin)

      let graphWidth: CGFloat = 0.8  // Graph is 80% of the width of the view
     let amplitude: CGFloat = 0.5   // Amplitude of sine wave is 30% of view

     for angle in stride(from: 1.0, through: bounds.size.width * 5.0, by: 1.0) {
         let x = origin.x + CGFloat(angle/360.0) * bounds.size.width * (360 / (bounds.size.width * 10.0))
         let y = origin.y - CGFloat(sin(angle/180.0 * CGFloat.pi)) * bounds.size.height * amplitude * (360 / (bounds.size.width * 10.0))
         path.addLine(to: CGPoint(x: x, y: y))
     }

Я пытаюсь достичь: wave

Каков будет лучший подход здесь? Если бы я мог работать над решением и выглядеть как изображение, это было бы прекрасно. Если у кого-то есть другие предложения, я открыт для всего.

1 Ответ

0 голосов
/ 10 января 2019

Весь кредит vacawama ответ . Вы можете добиться этого, как показано ниже, 

class SineView: UIView {
    let graphWidth: CGFloat = 0.15
    let amplitude: CGFloat = 0.1

    override func draw(_ rect: CGRect) {
        let width = rect.width
        let height = rect.height

        let origin = CGPoint(x: 0, y: height * 0.50)

        let path = UIBezierPath()
        path.move(to: origin)

        var endY: CGFloat = 0.0
        let step = 5.0
        for angle in stride(from: step, through: Double(width) * (step * step), by: step) {
            let x = origin.x + CGFloat(angle/360.0) * width * graphWidth
            let y = origin.y - CGFloat(sin(angle/180.0 * Double.pi)) * height * amplitude
            path.addLine(to: CGPoint(x: x, y: y))
            endY = y
        }
        path.addLine(to: CGPoint(x: width, y: endY))
        path.addLine(to: CGPoint(x: width, y: height))
        path.addLine(to: CGPoint(x: 0, y: height))
        path.addLine(to: CGPoint(x: 0, y: origin.y))

        UIColor.black.setFill()
        path.fill()
        UIColor.black.setStroke()
        path.stroke()
    }
}

Использование 

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let size = view.frame.size
        let sineView = SineView(frame: CGRect(x: 0, y: 100, width: size.width, height: 60))
        sineView.backgroundColor = .white
        self.view.addSubview(sineView)
    }
}

выход

enter image description here

Вы можете поиграть с graphWidth и amplitude, чтобы настроить график так, как вам нравится.

...