繁体   English   中英

如何在Objective-C中以半圆形形状绘制切片

[英]How to draw slices in semicircle shape layers in objective-c

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

- (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在半圆上绘制像馅饼的切片,该切片应完全匹配如下图所示的图像

谁能建议我任何解决方案

将此代码添加到您的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()

}

在此处输入图片说明

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

我在ViewController FYI中移动了视图的框架。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM