使用 UIBezierPath 在两点之间绘制波浪
Draw waves between 2 points with UIBezierPath
我正在尝试为 UITableViewCell 提供 'waved' 底部,使其看起来像 'ripped off paper' 效果(用于订单收据)。
我想在单元格的整个长度上绘制它。
我在 Whosebug 上找到了 解决方案,它在两点之间创建了一个正弦。
我尝试更改该代码以实现我需要的效果(我知道我的代码中有很多错误):
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))
}
我想达到的目的是:
最好的方法是什么?如果我能让上面的解决方案工作并且看起来像图像,那就太完美了。如果有人有其他建议,我愿意接受一切。
全部归功于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)
}
}
输出
您可以使用 graphWidth
和 amplitude
来随意调整图形。
我正在尝试为 UITableViewCell 提供 'waved' 底部,使其看起来像 'ripped off paper' 效果(用于订单收据)。 我想在单元格的整个长度上绘制它。
我在 Whosebug 上找到了
我尝试更改该代码以实现我需要的效果(我知道我的代码中有很多错误):
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))
}
我想达到的目的是:
最好的方法是什么?如果我能让上面的解决方案工作并且看起来像图像,那就太完美了。如果有人有其他建议,我愿意接受一切。
全部归功于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)
}
}
输出
您可以使用 graphWidth
和 amplitude
来随意调整图形。