ios - 如何在 objective-c 中绘制半圆形图层的切片

Question

我使用以下代码绘制了半圆形

- (void)drawRect:(CGRect)rect
{
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    [bezierPath addArcWithCenter:CGPointMake(self.frame.size.width, self.frame.size.height/2) radius:150 startAngle:0 endAngle:2 * M_PI clockwise:YES];
     CAShapeLayer *progressLayer = [[CAShapeLayer alloc] init];
    [progressLayer setPath:bezierPath.CGPath];
    [progressLayer setStrokeColor:[UIColor colorWithWhite:1. alpha:.2].CGColor];
    [progressLayer setFillColor:[UIColor colorWithRed:67.0/255.0 green:144.0/255.0 blue:246.0/255.0 alpha:1.0].CGColor];
    [progressLayer setLineWidth:.7 * self.bounds.size.width];
    [[self layer] addSublayer:progressLayer];
      // [self drawWheel];
  }

我想使用 Objective-c 在半圆中绘制一个像馅饼一样的切片，它应该与如下所示的图像完全匹配

谁能给我建议任何解决方案吗

Answer 1

将此代码添加到您的drawRect(_:)

let radius = min(bounds.size.width, bounds.size.height) / 2;
let center = CGPoint.init(x: bounds.size.width / 2, y: bounds.size.height / 2)
let sliceCount = 6;

let slicePath = UIBezierPath.init()
slicePath.lineWidth = 1;
slicePath.move(to: center)

var angle: CGFloat = 0 - (CGFloat.pi / 2);
var interval: CGFloat = (CGFloat.pi) / CGFloat(sliceCount)



for i in 0 ... sliceCount {
    let x = center.x + (radius * cos(angle))
    let y = center.y + (radius * sin(angle))
    slicePath.addLine(to: CGPoint.init(x: x, y: y))
    slicePath.move(to: center)
    angle -= interval;
}

UIColor.white.setStroke()
slicePath.stroke()

这是结果。

已更新另一个与您的目标非常相似的代码

override func draw(_ rect: CGRect) {

    let radius = min(bounds.size.width, bounds.size.height) / 2;
    let center = CGPoint.init(x: bounds.size.width, y: bounds.size.height / 2)
    let sliceCount = 6;

    let semiCirclePath = UIBezierPath.init()
    semiCirclePath.move(to: center)
    semiCirclePath.addArc(withCenter: center, radius: radius, startAngle: CGFloat.pi / 2, endAngle: CGFloat.pi + (CGFloat.pi / 2) , clockwise: true)
    semiCirclePath.close()
    UIColor.blue.setFill()
    semiCirclePath.fill()



    let slicePath = UIBezierPath.init()
    slicePath.lineWidth = 1;
    slicePath.move(to: center)

    var angle: CGFloat = 0 - (CGFloat.pi / 2);
    var interval: CGFloat = (CGFloat.pi) / CGFloat(sliceCount)



    for i in 0 ... sliceCount {
        let x = center.x + (radius * cos(angle))
        let y = center.y + (radius * sin(angle))
        slicePath.addLine(to: CGPoint.init(x: x, y: y))
        slicePath.move(to: center)
        angle -= interval;
    }

    UIColor.white.setStroke()
    slicePath.stroke()

    semiCirclePath.removeAllPoints()
    semiCirclePath.move(to: center)
    semiCirclePath.addArc(withCenter: center, radius: 30, startAngle: CGFloat.pi / 2, endAngle: CGFloat.pi + (CGFloat.pi / 2) , clockwise: true)
    UIColor.lightGray.setFill()
    semiCirclePath.fill()
}

这是它的样子，

第二次更新对于看起来完全像的那个

override func draw(_ rect: CGRect) {

    let radius = min(bounds.size.width, bounds.size.height) / 2;
    let center = CGPoint.init(x: bounds.size.width, y: bounds.size.height / 2)
    let selectedSliceIndex = 2;
    let sliceCount = 6;

    let slicePath = UIBezierPath.init()
    let selectedSlicePath = UIBezierPath.init()
    slicePath.lineWidth = 1;
    slicePath.move(to: center)

    var angle: CGFloat = 0 - (CGFloat.pi / 2);
    let interval: CGFloat = (CGFloat.pi) / CGFloat(sliceCount)

    for i in 0 ... sliceCount {
        let x = center.x + (radius * cos(angle))
        let y = center.y + (radius * sin(angle))
        slicePath.addLine(to: CGPoint.init(x: x, y: y))
        slicePath.move(to: center)


        if i == selectedSliceIndex {
            selectedSlicePath.move(to: center)
            selectedSlicePath.addArc(withCenter: center, radius: radius, startAngle: angle - interval, endAngle: angle, clockwise: true)
            selectedSlicePath.close()
        }

        angle -= interval;
    }

    // outer blue circle
    let semiCirclePath = UIBezierPath.init()
    semiCirclePath.move(to: center)
    semiCirclePath.addArc(withCenter: center, radius: radius, startAngle: CGFloat.pi / 2, endAngle: CGFloat.pi + (CGFloat.pi / 2) , clockwise: true)
    semiCirclePath.close()
    UIColor.blue.setFill()
    semiCirclePath.fill()

    // lines
    UIColor.white.setStroke()
    slicePath.stroke()

    // selected slice
    UIColor.lightGray.setFill()
    selectedSlicePath.fill()
    UIColor.clear.setFill()

    // inner gray circle
    semiCirclePath.removeAllPoints()
    semiCirclePath.move(to: center)
    semiCirclePath.addArc(withCenter: center, radius: 30, startAngle: CGFloat.pi / 2, endAngle: CGFloat.pi + (CGFloat.pi / 2) , clockwise: true)
    UIColor.lightGray.setFill()
    semiCirclePath.fill()

}

您可能需要调整一些值才能看起来更漂亮。

我将 View 的框架移动到 ViewController 内，仅供引用。