ios - Draw CALayer border around UIView
问题描述
I want to draw a border with open gaps around a rounded UIView.
What I currently have is this result:
What I want to achieve is that the gray borders are laying outside the yellow view. Now they are drawn that the middle of the gray line is still in the yellow.
I tried with a mask but then only the oudside ofcourse is cut.
My code:
struct Config {
let start: CGFloat
let end: CGFloat
let color: UIColor
}
extension UIView {
func drawBorders(for configs: [Config], lineWidth: CGFloat = 3.5) {
let circlePath = UIBezierPath(arcCenter: CGPoint (x: self.bounds.size.width / 2,
y: self.bounds.size.height / 2),
radius: self.bounds.size.width / 2,
startAngle: CGFloat(-0.5 * Double.pi),
endAngle: CGFloat(1.5 * Double.pi),
clockwise: true)
for config in configs {
let circleShape = CAShapeLayer()
circleShape.path = circlePath.cgPath
circleShape.strokeColor = config.color.cgColor
circleShape.fillColor = UIColor.clear.cgColor
circleShape.lineWidth = lineWidth
circleShape.strokeStart = config.start
circleShape.strokeEnd = config.end
self.layer.addSublayer(circleShape)
// let maskLayer = CAShapeLayer()
// maskLayer.frame = self.bounds
// maskLayer.path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: self.bounds.size.width / 2, height: self.bounds.size.width / 2)).cgPath
// self.layer.mask = maskLayer
}
}
}
Also added the mask code in comment to show what I have tried.
Test code:
let roundView = UIView(frame: CGRect(x: 100, y: 100, width: 150, height: 150))
roundView.backgroundColor = .yellow
roundView.layer.cornerRadius = roundView.frame.size.width / 2
let config1 = Config(start: 0.125, end: 0.25, color: .gray)
let config2 = Config(start: 0.375, end: 0.5, color: .gray)
let config3 = Config(start: 0.625, end: 0.75, color: .gray)
let config4 = Config(start: 0.875, end: 1, color: .gray)
roundView.drawBorders(for: [config1, config2, config3, config4])
view.addSubview(roundView)
Can someone please help me out?
解决方案
Change your circlePath
.... include linewidth
in radius
will resolve your issue
let circlePath = UIBezierPath(arcCenter: CGPoint (x: self.bounds.size.width / 2,
y: self.bounds.size.height / 2),
radius: (self.bounds.size.width / 2) + lineWidth/2,
startAngle: CGFloat(-0.5 * Double.pi),
endAngle: CGFloat(1.5 * Double.pi),
clockwise: true)
推荐阅读
- sql - 在 SQL 中查询一个杂乱的表
- django - 如何修改默认的 Django 用户表
- c# - C#.net。当我打开文件时无法将文件捕获为只读
- php - 是否可以使用 PHP 中的内置 openssl_pkey_new 函数生成 ED25519 密钥对?
- javascript - 暂停扩展后如何简单地在内容脚本上运行侦听器
- listview - 如何为 ListView 的 ContextActions 的 MenuItem 添加可见性绑定
- r - 带有 dplyr/ggplot 的条形图,带有并排的男性/女性条
- android - 如何在sqlite db中存储json数组api
- excel - 如果整个值包含在当前行中,则 Excel 删除上一行,并且 A 列以前的值也相同
- html - 在 pug/jade 中包含父元素