gpt4 book ai didi

ios - iOS系统如何绘制 View 角形状?

转载 作者:行者123 更新时间:2023-12-03 08:25:31 26 4
gpt4 key购买 nike

抱歉我的描述不清楚,我的目的是显示一些不常见的边框,比如虚线、点、渐变等,但是使用贝塞尔曲线来绘制无法与layer.cornerRadius。当然,可以使用layer.mask。为了解决这个问题,出于性能考虑和我的好奇心,我想将它们完美地结合起来。

初衷

我想自己为 UIView 绘制一个自定义边框。在这个过程中,我遇到了一些让我困惑的问题:

  • 贝塞尔曲线的边缘无法与 View 的边缘对齐。
  • 系统的圆角边缘大于贝塞尔曲线绘制的圆角范围。

尝试解决

第一个问题:

我已经解决了第一个问题,因为绘制曲线的 Nib 处于线宽的中间,所以无法沿着 View 的边缘进行绘制。需要一定的距离。

为了解决这个问题,我将线段从 View 中分离出来,以便更好地观察:

let bgView = UIView(frame: CGRect(x: 0, y: 0, width: 80, height: 80))
bgView.backgroundColor = UIColor.red
bgView.layer.cornerRadius = 10
view.addSubview(bgView)
let imageView = UIImageView()
imageView.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
imageView.backgroundColor = UIColor.clear
view.addSubview(imageView)
bgView.center = imageView.center

//draw a 80 * 80 image in the context center
UIGraphicsBeginImageContextWithOptions(CGSize(width: 100, height: 100), false, UIScreen.main.scale)
let borderWidth = 4
let rect = CGRect(x: 10 , y: 10, width: 80, height: 80)
let roundPath = UIBezierPath(roundedRect: rect, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 10, height: 10))
roundPath.lineWidth = 4
roundPath.lineJoinStyle = .round
UIColor.black.withAlphaComponent(0.3).setStroke()
roundPath.stroke()

imageView.image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

运行并放大,你会看到:

result of Q1

可以看到 View 的边缘在线宽的中间,所以解决办法是调整贝塞尔曲线矩形的绘制。

//change
//let rect = CGRect(x: 10 , y: 10, width: 80, height: 80)
//to
let rect = CGRect(x: 10 + 2, y: 10 + 2, width: 80 - 4, height: 80 - 4)

但是我没有找到相关文档来解释它。有谁知道吗?

第二季度

由于Q1的解,也找到了Q2:

Q2 problem

只有View的圆角超出了贝塞尔曲线的范围。

一开始我以为是贝塞尔曲线的绘制方式有问题,所以分解了绘制步骤:

let roundPath3 = UIBezierPath()
roundPath3.lineWidth = 4
roundPath3.lineJoinStyle = .round
roundPath3.move(to: CGPoint(x: rect.minX + 10, y: rect.minY))
roundPath3.addLine(to: CGPoint(x: rect.maxX - 10, y: rect.minY))
roundPath3.addArc(withCenter: CGPoint(x: rect.maxX - 10, y: rect.minY + 10), radius: 10, startAngle: 1.5 * CGFloat.pi, endAngle: 2 * CGFloat.pi, clockwise: true)
roundPath3.move(to: CGPoint(x: rect.maxX, y: rect.minY + 10))
roundPath3.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY - 10))
roundPath3.addArc(withCenter: CGPoint(x: rect.maxX - 10, y: rect.maxY - 10), radius: 10, startAngle: 0 * CGFloat.pi, endAngle: 0.5 * CGFloat.pi, clockwise: true)
roundPath3.move(to: CGPoint(x: rect.maxX - 10, y: rect.maxY))
roundPath3.addLine(to: CGPoint(x: rect.minX + 10, y: rect.maxY))
roundPath3.addArc(withCenter: CGPoint(x: rect.minX + 10, y: rect.maxY - 10), radius: 10, startAngle: 0.5 * CGFloat.pi, endAngle: 1 * CGFloat.pi, clockwise: true)
roundPath3.move(to: CGPoint(x: rect.minX, y: rect.maxY - 10))
roundPath3.addLine(to: CGPoint(x: rect.minX, y: rect.minY + 10))
roundPath3.addArc(withCenter: CGPoint(x: rect.minX + 10, y: rect.minY + 10), radius: 10, startAngle: 1 * CGFloat.pi, endAngle: 1.5 * CGFloat.pi, clockwise: true)
UIColor.blue.withAlphaComponent(0.5).setStroke()
roundPath3.stroke()

不幸的是,它与上面的结果相同。我还尝试将绘制的圆弧半径延长 1pt。虽然它覆盖了 View 的圆角,但结果很丑。

我仔细观察,猜想iOS系统的实现看起来并不像一个纯粹的圆形,更像是一个椭圆形。所以我有一个想法,调整二次贝塞尔曲线的控制点来模拟,但我没有线索来计算合适的控制点。

最佳答案

您在这里遇到了几个问题...

首先,.cornerRadius有两种曲线类型:

  • .round——默认值。非常适合制作“圆形” View
  • .continuous -- 更令人愉悦的视觉曲线,最适合“圆角”

为了演示差异,这里有一个位于红色 View 之上的绿色 View ,其中红色 View 使用 .round,绿色 View 使用 .continuous:

enter image description here

请注意,如果我们将两者都设置为 .continuous,我们会得到:

enter image description here

UIBezierPath(roundedRect: ...) 使用 .continuous 曲线,因此如果我们屏蔽绿色 View (而不是设置其 .cornerRadius) 并使用红色 View 的默认曲线,它看起来与第一个示例相同:

enter image description here

如果我们屏蔽绿色 View 并将红色 View 设置为 .continuous,我们会得到与第二个示例相同的结果:

enter image description here

如果你仔细观察,你会看到一个微弱的红色“边缘”——这是由于 UIKit 抗锯齿功能造成的。如果我们将“绿色 View ”背景色设置为白色,则非常明显:

enter image description here

但是,这是一个不同的问题,可能不会影响您想要做的事情。

下一部分是尝试“勾勒” View 。如您所知,路径的笔划被设置为曲线的中心线:

enter image description here

我们有一半的笔画宽度在里面,一半的笔画宽度在外面。

因此,“修复”的尝试是将轮廓 View 插入笔划宽度的 1/2...但是,再次如您所见,我们最终会得到以下结果:

enter image description here

那是因为笔划最终以 3 个不同的半径结束!

让我们使用 40 的圆角半径和 16 的描边宽度,以使其更易于查看。

这是具有相同大小的 View :

enter image description here

如果我们只是将“轮廓 View ”插入边​​框宽度的 1/2 并且不更改半径,我们会得到:

enter image description here

那么,让我们将贝塞尔曲线路径的角半径调整为笔划宽度的 1/2:

enter image description here

我们的最终结果(没有中心线形状层)是:

enter image description here

这里有一些代码可供使用并检查正在发生的情况 - 每次点击都会执行我上面描述的步骤:

class CornersViewController: UIViewController {

let stepLabel = UILabel()
let infoLabel = UILabel()

let bgViewWidth: CGFloat = 400
let cornerRadius: CGFloat = 40
let borderWidth: CGFloat = 16

lazy var viewFrame: CGRect = CGRect(x: -200, y: 260, width: bgViewWidth, height: bgViewWidth)

var step: Int = 1

override func viewDidLoad() {
super.viewDidLoad()

view.backgroundColor = .white

stepLabel.translatesAutoresizingMaskIntoConstraints = false
stepLabel.font = .systemFont(ofSize: 12.0, weight: .bold)
//stepLabel.textAlignment = .center
view.addSubview(stepLabel)
infoLabel.translatesAutoresizingMaskIntoConstraints = false
infoLabel.numberOfLines = 0
infoLabel.font = .systemFont(ofSize: 12.0, weight: .light)
view.addSubview(infoLabel)
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
stepLabel.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
stepLabel.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
stepLabel.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
infoLabel.topAnchor.constraint(equalTo: stepLabel.bottomAnchor, constant: 8.0),
infoLabel.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
infoLabel.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
])

let t = UITapGestureRecognizer(target: self, action: #selector(gotTap(_:)))
view.addGestureRecognizer(t)

nextStep()
}

@objc func gotTap(_ g: UITapGestureRecognizer) -> Void {
nextStep()
}

func nextStep() {

// remove existing example views, but not the "info" label
view.subviews.forEach { v in
if !(v is UILabel) {
v.removeFromSuperview()
}
}

stepLabel.text = "Step: \(step) of \(infoStrings.count)"
infoLabel.text = infoStrings[step - 1]

// red: .cornerCurve = .round (default)
// green: .cornerCurve = .continuous
if step == 1 {
let redView = UIView(frame: viewFrame)
view.addSubview(redView)

redView.backgroundColor = UIColor.red
redView.layer.cornerRadius = cornerRadius

let greenView = UIView(frame: viewFrame)
view.addSubview(greenView)

greenView.backgroundColor = UIColor.green
greenView.layer.cornerRadius = cornerRadius
greenView.layer.cornerCurve = .continuous
}

// red: .cornerCurve = .continuous
// green: .cornerCurve = .continuous
if step == 2 {
let redView = UIView(frame: viewFrame)
view.addSubview(redView)

redView.backgroundColor = UIColor.red
redView.layer.cornerRadius = cornerRadius
redView.layer.cornerCurve = .continuous

let greenView = UIView(frame: viewFrame)
view.addSubview(greenView)

greenView.backgroundColor = UIColor.green
greenView.layer.cornerRadius = cornerRadius
greenView.layer.cornerCurve = .continuous
}

// red: .cornerCurve = .round (default)
// green: masked with UIBezierPath(roundedRect: ...)
if step == 3 {
let redView = UIView(frame: viewFrame)
view.addSubview(redView)

redView.backgroundColor = UIColor.red
redView.layer.cornerRadius = cornerRadius

let greenView = UIView(frame: viewFrame)

view.addSubview(greenView)

greenView.backgroundColor = UIColor.green

let maskLayer = CAShapeLayer()
let maskBez = UIBezierPath(roundedRect: greenView.bounds, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))
maskLayer.path = maskBez.cgPath
greenView.layer.mask = maskLayer
}

// red: .cornerCurve = .continuous
// green: masked with UIBezierPath(roundedRect: ...)
if step == 4 {
let redView = UIView(frame: viewFrame)
view.addSubview(redView)

redView.backgroundColor = UIColor.red
redView.layer.cornerRadius = cornerRadius
redView.layer.cornerCurve = .continuous

let greenView = UIView(frame: viewFrame)

view.addSubview(greenView)

greenView.backgroundColor = UIColor.green

let maskLayer = CAShapeLayer()
let maskBez = UIBezierPath(roundedRect: greenView.bounds, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))
maskLayer.path = maskBez.cgPath
greenView.layer.mask = maskLayer
}

// red: .cornerCurve = .continuous
// bordered: sublayer with UIBezierPath(roundedRect: ...)
// clear fill, 30%-black stroke, lineWidth == borderWidth
if step == 5 {
let redView = UIView(frame: viewFrame)
view.addSubview(redView)

redView.backgroundColor = UIColor.red
redView.layer.cornerRadius = cornerRadius
redView.layer.cornerCurve = .continuous

let borderedView = UIView(frame: viewFrame)

view.addSubview(borderedView)

borderedView.backgroundColor = UIColor.clear

borderedView.layer.cornerRadius = cornerRadius
borderedView.layer.cornerCurve = .continuous

let borderLayer = CAShapeLayer()
let roundPath = UIBezierPath(roundedRect: borderedView.bounds, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))

borderLayer.path = roundPath.cgPath

borderLayer.lineWidth = borderWidth
borderLayer.fillColor = UIColor.clear.cgColor
borderLayer.strokeColor = UIColor.black.withAlphaComponent(0.3).cgColor

borderedView.layer.addSublayer(borderLayer)
}

// red: .cornerCurve = .continuous
// bordered: sublayer with UIBezierPath(roundedRect: ...)
// clear fill, 30%-black stroke, lineWidth == borderWidth
// frame inset by 1/2 borderWidth
if step == 6 {
let redView = UIView(frame: viewFrame)
view.addSubview(redView)

redView.backgroundColor = UIColor.red
redView.layer.cornerRadius = cornerRadius
redView.layer.cornerCurve = .continuous

let borderedView = UIView(frame: viewFrame)

view.addSubview(borderedView)

borderedView.backgroundColor = UIColor.red

borderedView.layer.cornerRadius = cornerRadius
borderedView.layer.cornerCurve = .continuous

let borderLayer = CAShapeLayer()

let rect = borderedView.bounds.insetBy(dx: borderWidth * 0.5, dy: borderWidth * 0.5)

let roundPath = UIBezierPath(roundedRect: rect, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))

borderLayer.path = roundPath.cgPath

borderLayer.lineWidth = borderWidth
borderLayer.fillColor = UIColor.clear.cgColor
borderLayer.strokeColor = UIColor.black.withAlphaComponent(0.3).cgColor

borderedView.layer.addSublayer(borderLayer)
}

// red: .cornerCurve = .continuous
// bordered: sublayer with UIBezierPath(roundedRect: ...)
// clear fill, 30%-black stroke, lineWidth == borderWidth
// frame inset by 1/2 borderWidth
// showing border centerLine
if step == 7 {
let redView = UIView(frame: viewFrame)
view.addSubview(redView)

redView.backgroundColor = UIColor.red
redView.layer.cornerRadius = cornerRadius
redView.layer.cornerCurve = .continuous

let borderedView = UIView(frame: viewFrame)

view.addSubview(borderedView)

borderedView.backgroundColor = UIColor.red

borderedView.layer.cornerRadius = cornerRadius
borderedView.layer.cornerCurve = .continuous

let borderLayer = CAShapeLayer()

let rect = borderedView.bounds.insetBy(dx: borderWidth * 0.5, dy: borderWidth * 0.5)

let roundPath = UIBezierPath(roundedRect: rect, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))

borderLayer.path = roundPath.cgPath

borderLayer.lineWidth = borderWidth
borderLayer.fillColor = UIColor.clear.cgColor
borderLayer.strokeColor = UIColor.black.withAlphaComponent(0.3).cgColor

borderedView.layer.addSublayer(borderLayer)

let centerLineLayer = CAShapeLayer()

centerLineLayer.path = roundPath.cgPath

centerLineLayer.lineWidth = 1
centerLineLayer.fillColor = UIColor.clear.cgColor
centerLineLayer.strokeColor = UIColor.cyan.cgColor

borderedView.layer.addSublayer(centerLineLayer)
}

// red: .cornerCurve = .continuous
// bordered: sublayer with UIBezierPath(roundedRect: ...)
// clear fill, 30%-black stroke, lineWidth == borderWidth
// frame inset by 1/2 borderWidth
// radius adjusted by 1/2 borderWidth
// showing border centerLine
if step == 8 {
let redView = UIView(frame: viewFrame)
view.addSubview(redView)

redView.backgroundColor = UIColor.red
redView.layer.cornerRadius = cornerRadius
redView.layer.cornerCurve = .continuous

let borderedView = UIView(frame: viewFrame)

view.addSubview(borderedView)

borderedView.backgroundColor = UIColor.red

borderedView.layer.cornerRadius = cornerRadius
borderedView.layer.cornerCurve = .continuous

let borderLayer = CAShapeLayer()

let rect = borderedView.bounds.insetBy(dx: borderWidth * 0.5, dy: borderWidth * 0.5)
let adjustedRadius = cornerRadius - (borderWidth * 0.5)

let roundPath = UIBezierPath(roundedRect: rect, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: adjustedRadius, height: adjustedRadius))

borderLayer.path = roundPath.cgPath

borderLayer.lineWidth = borderWidth
borderLayer.fillColor = UIColor.clear.cgColor
borderLayer.strokeColor = UIColor.black.withAlphaComponent(0.3).cgColor

borderedView.layer.addSublayer(borderLayer)

let centerLineLayer = CAShapeLayer()

centerLineLayer.path = roundPath.cgPath

centerLineLayer.lineWidth = 1
centerLineLayer.fillColor = UIColor.clear.cgColor
centerLineLayer.strokeColor = UIColor.cyan.cgColor

borderedView.layer.addSublayer(centerLineLayer)
}

// red: .cornerCurve = .continuous
// bordered: sublayer with UIBezierPath(roundedRect: ...)
// clear fill, 30%-black stroke, lineWidth == borderWidth
// frame inset by 1/2 borderWidth
// radius adjusted by 1/2 borderWidth
if step == 9 {
let redView = UIView(frame: viewFrame)
view.addSubview(redView)

redView.backgroundColor = UIColor.red
redView.layer.cornerRadius = cornerRadius
redView.layer.cornerCurve = .continuous

let borderedView = UIView(frame: viewFrame)

view.addSubview(borderedView)

borderedView.backgroundColor = UIColor.red

borderedView.layer.cornerRadius = cornerRadius
borderedView.layer.cornerCurve = .continuous

let borderLayer = CAShapeLayer()

let rect = borderedView.bounds.insetBy(dx: borderWidth * 0.5, dy: borderWidth * 0.5)
let adjustedRadius = cornerRadius - (borderWidth * 0.5)

let roundPath = UIBezierPath(roundedRect: rect, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: adjustedRadius, height: adjustedRadius))

borderLayer.path = roundPath.cgPath

borderLayer.lineWidth = borderWidth
borderLayer.fillColor = UIColor.clear.cgColor
borderLayer.strokeColor = UIColor.black.withAlphaComponent(0.3).cgColor

borderedView.layer.addSublayer(borderLayer)
}

// red: .cornerCurve = .continuous
// white: .cornerCurve = .continuous
if step == 10 {
let redView = UIView(frame: viewFrame)
view.addSubview(redView)

redView.backgroundColor = UIColor.red
redView.layer.cornerRadius = cornerRadius
redView.layer.cornerCurve = .continuous

let whiteView = UIView(frame: viewFrame)
view.addSubview(whiteView)

whiteView.backgroundColor = UIColor.white
whiteView.layer.cornerRadius = cornerRadius
whiteView.layer.cornerCurve = .continuous
}

step += 1
if step > infoStrings.count {
step = 1
}

}

let infoStrings: [String] = [
"redView:\n .cornerCurve = .round (default)\n\ngreenView:\n .cornerCurve = .continuous",
"redView:\n .cornerCurve = .continuous\n\ngreenView:\n .cornerCurve = .continuous",
"redView:\n .cornerCurve = .round (default)\n\ngreenView:\n masked with UIBezierPath(roundedRect: ...)",
"redView:\n .cornerCurve = .continuous\n\ngreenView:\n masked with UIBezierPath(roundedRect: ...)",
"redView:\n .cornerCurve = .continuous\n\nborderedView:\n sublayer with UIBezierPath(roundedRect: ...)\n clear fill, 30%-black stroke, lineWidth == borderWidth",
"redView:\n .cornerCurve = .continuous\n\nborderedView:\n sublayer with UIBezierPath(roundedRect: ...)\n clear fill, 30%-black stroke, lineWidth == borderWidth\n frame inset by 1/2 borderWidth",
"redView:\n .cornerCurve = .continuous\n\nborderedView:\n sublayer with UIBezierPath(roundedRect: ...)\n clear fill, 30%-black stroke, lineWidth == borderWidth\n frame inset by 1/2 borderWidth\n showing border center line",
"redView:\n .cornerCurve = .continuous\n\nborderedView:\n sublayer with UIBezierPath(roundedRect: ...)\n clear fill, 30%-black stroke, lineWidth == borderWidth\n frame inset by 1/2 borderWidth\n radius adjusted by 1/2 borderWidth\n showing border center line",
"redView:\n .cornerCurve = .continuous\n\nborderedView:\n sublayer with UIBezierPath(roundedRect: ...)\n clear fill, 30%-black stroke, lineWidth == borderWidth\n frame inset by 1/2 borderWidth\n radius adjusted by 1/2 borderWidth\n final result",
"redView:\n .cornerCurve = .continuous\n\nwhiteView:\n .cornerCurve = .continuous\n\n Showing the Anti-Aliasing...",
]
}

关于ios - iOS系统如何绘制 View 角形状?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66829955/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com