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 仅供参考。
我使用以下代码绘制了半圆形
- (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 仅供参考。