1
A
回答
2
3
這是一個基於代碼的解決方案,不需要任何圖像。這將使用UIBezierPath
創建自定義視圖來創建正弦波。
import UIKit
class WavyView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
return nil // TODO
}
override func draw(_ rect: CGRect) {
// Fill the whole background with the darkest blue color
UIColor(red: 0.329, green: 0.718, blue: 0.875, alpha: 1).set()
let bg = UIBezierPath(rect: rect)
bg.fill()
// Add the first sine wave filled with a very transparent white
let top1: CGFloat = 17.0
let wave1 = wavyPath(rect: CGRect(x: 0, y: top1, width: frame.width, height: frame.height - top1), periods: 1.5, amplitude: 21, start: 0.55)
UIColor(white: 1.0, alpha: 0.1).set()
wave1.fill()
// Add the second sine wave over the first
let top2: CGFloat = 34.0
let wave2 = wavyPath(rect: CGRect(x: 0, y: top2, width: frame.width, height: frame.height - top2), periods: 1.5, amplitude: 21, start: 0.9)
UIColor(white: 1.0, alpha: 0.15).set()
wave2.fill()
// Add the text
let paraAttrs = NSMutableParagraphStyle()
paraAttrs.alignment = .center
let textRect = CGRect(x: 0, y: frame.maxY - 64, width: frame.width, height: 24)
let textAttrs = [NSFontAttributeName: UIFont.boldSystemFont(ofSize: 20), NSForegroundColorAttributeName: UIColor(white: 1.0, alpha: 0.9), NSParagraphStyleAttributeName: paraAttrs]
("New user? Register here." as NSString).draw(in: textRect, withAttributes: textAttrs)
}
// This creates the desired sine wave bezier path
// rect is the area to fill with the sine wave
// periods is how may sine waves fit across the width of the frame
// amplitude is the height in points of the sine wave
// start is an offset in wavelengths for the left side of the sine wave
func wavyPath(rect: CGRect, periods: Double, amplitude: Double, start: Double) -> UIBezierPath {
let path = UIBezierPath()
// start in the bottom left corner
path.move(to: CGPoint(x: rect.minX, y: rect.maxY))
let radsPerPoint = Double(rect.width)/periods/2.0/Double.pi
let radOffset = start * 2 * Double.pi
let xOffset = Double(rect.minX)
let yOffset = Double(rect.minY) + amplitude
// This loops through the width of the frame and calculates and draws each point along the size wave
// Adjust the "by" value as needed. A smaller value gives smoother curve but takes longer to draw. A larger value is quicker but gives a rougher curve.
for x in stride(from: 0, to: Double(rect.width), by: 6) {
let rad = Double(x)/radsPerPoint + radOffset
let y = sin(rad) * amplitude
path.addLine(to: CGPoint(x: x + xOffset, y: y + yOffset))
}
// Add the last point on the sine wave at the right edge
let rad = Double(rect.width)/radsPerPoint + radOffset
let y = sin(rad) * amplitude
path.addLine(to: CGPoint(x: Double(rect.maxX), y: y + yOffset))
// Add line from the end of the sine wave to the bottom right corner
path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
// Close the path
path.close()
return path
}
}
// This creates the view with the same size as the image posted in the question
let wavy = WavyView(frame: CGRect(x: 0, y: 0, width: 502, height: 172))
在操場斯威夫特運行代碼,結果給出如下:
很明顯,你可以在代碼調整的任何值以上調整的結果。
+0
偉大的方法! –
相關問題
- 1. 如何更改UIView的形狀
- 2. 定製邊界矩形的形狀
- 3. 查找平面圖(幾何形狀)的邊界(邊界)
- 4. 查找GDI +形狀的邊界
- 5. 更改UIView中元素的大小,並使用[[UIScreen mainScreen]邊界]
- 6. 一旦調用UIPinchGestureRecognizer就更改UIView的邊界
- 7. 更改窗口的邊界
- 8. 如何在android中更改自定義形狀的邊界顏色?
- 9. 更多精確形狀的邊界位置
- 10. 如何更改CAShapeLayer中的多邊形形狀?
- 11. 爲什麼在UIView中有框架矩形和邊界矩形?
- 12. 多邊形的邊界框
- 13. iPhone自定義UIView邊界
- 14. Matlab - 將點正交傳播到形狀邊界的邊緣
- 15. 旋轉的UIView和核心圖形的邊界
- 16. 通過座標計算2D形狀的最小邊界矩形
- 17. 用於項目交互的Qt邊界矩形/形狀
- 18. 更改jpeg的形狀
- 19. 更改陣列的形狀
- 20. 更改JButton的形狀
- 21. 更改imageView的UITableViewCell的邊界
- 22. 如何更改UIPageControl點的邊界?
- 23. 更改Facebook的邊界像圖標
- 24. 如何更改boxplot的邊界顏色?
- 25. 更改Jung中邊緣的形狀和位置
- 26. 在UIView的邊界上使用碰撞
- 27. 的UIView層 - 刪除一條邊界
- 28. UIView的邊界和幀大小
- 29. UIView的邊界大小vs幀大小
- 30. 在UIView中顯示UIImageView的邊界框
使用imageView是一個選項,但有一些缺點。 a)添加大量的圖像會增加您的應用程序大小b)您需要根據設備大小維護多個版本的圖像(例如:運行您需要單獨的圖像爲ipad vs iphone。)我會看看使用UIView創建此和繪製形狀。 – TheAppMentor