绘制部分圆
Drawing a partial circle
我正在编写一个程序,它会取一个介于 0 和 1 之间的数字,然后吐出一个圆(或者我猜是圆弧),它完成了那么多。
所以比如输入0.5,程序会输出一个半圆
如果为 0.1,程序将输出一个微小的圆弧,最终占整个圆的 10%。
我可以通过将角度起点设为 0 并将角度终点设为 2*M_PI*decimalInput
来实现这一点
但是,我需要在圆的顶部有起点,所以起点是 3*M_PI_2
,终点是 7*M_PI_2
我只是无法用这些新的 starting/ending 点绘制部分完整的圆。我承认,我的数学不是最好的,所以任何 advice/input 都值得赞赏
这是我目前所拥有的
var decimalInput = 0.75 //this number can be any number between 0 and 1
let start = CGFloat(3*M_PI_2)
let end = CGFloat(7*M_PI_2*decimalInput)
let circlePath = UIBezierPath(arcCenter: circleCenter, radius: circleRadius, startAngle: start, endAngle: end, clockwise: true)
circlePath.stroke()
尽管我尝试了很多,但我似乎还是做不好。我认为结束角度是罪魁祸首,除非我以错误的方式解决这个问题
弧长为2 * M_PI * decimalInput
。您需要将弧长添加到起始角度,如下所示:
let circleCenter = CGPointMake(100, 100)
let circleRadius = CGFloat(80)
var decimalInput = 0.75
let start = CGFloat(3 * M_PI_2)
let end = start + CGFloat(2 * M_PI * decimalInput)
let circlePath = UIBezierPath(arcCenter: circleCenter, radius: circleRadius, startAngle: start, endAngle: end, clockwise: true)
XCPCaptureValue("path", circlePath)
结果:
请注意,在绘制 UIView
时,路径会垂直翻转。
您可以使用此扩展程序绘制部分圆
extension UIBezierPath {
func addCircle(center: CGPoint, radius: CGFloat, startAngle: Double, circlePercentage: Double) {
let start = deg2rad(startAngle)
let end = start + CGFloat(2 * Double.pi * circlePercentage)
addArc(withCenter: center,
radius: radius,
startAngle: start,
endAngle: end,
clockwise: true)
}
private func deg2rad(_ number: Double) -> CGFloat {
return CGFloat(number * Double.pi / 180)
}
}
示例用法(您可以将其复制粘贴到 playground 中以查看结果)
let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.backgroundColor = UIColor.green
let layer = CAShapeLayer()
layer.strokeColor = UIColor.red.cgColor
layer.fillColor = UIColor.clear.cgColor
layer.lineWidth = 8
let path = UIBezierPath()
path.addCircle(center: CGPoint(x: 50, y: 50), radius: 50, startAngle: 270, circlePercentage: 0.87)
layer.path = path.cgPath
view.layer.addSublayer(layer)
view.setNeedsLayout()
我正在编写一个程序,它会取一个介于 0 和 1 之间的数字,然后吐出一个圆(或者我猜是圆弧),它完成了那么多。
所以比如输入0.5,程序会输出一个半圆
如果为 0.1,程序将输出一个微小的圆弧,最终占整个圆的 10%。
我可以通过将角度起点设为 0 并将角度终点设为 2*M_PI*decimalInput
但是,我需要在圆的顶部有起点,所以起点是 3*M_PI_2
,终点是 7*M_PI_2
我只是无法用这些新的 starting/ending 点绘制部分完整的圆。我承认,我的数学不是最好的,所以任何 advice/input 都值得赞赏
这是我目前所拥有的
var decimalInput = 0.75 //this number can be any number between 0 and 1
let start = CGFloat(3*M_PI_2)
let end = CGFloat(7*M_PI_2*decimalInput)
let circlePath = UIBezierPath(arcCenter: circleCenter, radius: circleRadius, startAngle: start, endAngle: end, clockwise: true)
circlePath.stroke()
尽管我尝试了很多,但我似乎还是做不好。我认为结束角度是罪魁祸首,除非我以错误的方式解决这个问题
弧长为2 * M_PI * decimalInput
。您需要将弧长添加到起始角度,如下所示:
let circleCenter = CGPointMake(100, 100)
let circleRadius = CGFloat(80)
var decimalInput = 0.75
let start = CGFloat(3 * M_PI_2)
let end = start + CGFloat(2 * M_PI * decimalInput)
let circlePath = UIBezierPath(arcCenter: circleCenter, radius: circleRadius, startAngle: start, endAngle: end, clockwise: true)
XCPCaptureValue("path", circlePath)
结果:
请注意,在绘制 UIView
时,路径会垂直翻转。
您可以使用此扩展程序绘制部分圆
extension UIBezierPath {
func addCircle(center: CGPoint, radius: CGFloat, startAngle: Double, circlePercentage: Double) {
let start = deg2rad(startAngle)
let end = start + CGFloat(2 * Double.pi * circlePercentage)
addArc(withCenter: center,
radius: radius,
startAngle: start,
endAngle: end,
clockwise: true)
}
private func deg2rad(_ number: Double) -> CGFloat {
return CGFloat(number * Double.pi / 180)
}
}
示例用法(您可以将其复制粘贴到 playground 中以查看结果)
let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.backgroundColor = UIColor.green
let layer = CAShapeLayer()
layer.strokeColor = UIColor.red.cgColor
layer.fillColor = UIColor.clear.cgColor
layer.lineWidth = 8
let path = UIBezierPath()
path.addCircle(center: CGPoint(x: 50, y: 50), radius: 50, startAngle: 270, circlePercentage: 0.87)
layer.path = path.cgPath
view.layer.addSublayer(layer)
view.setNeedsLayout()