Question

我可能需要像图像一样的布局但我不能这样画，所以对此有任何想法，

Answer 1

最简单的方法是使视图包含两个子视图，一个用于绿色“填充百分比”级别，另一个用于文本标签。然后，您可以根据“填充百分比”更新frame，显然，根据您想要的百分比填充。然后对整个事物应用圆形蒙版。

例如：

//  CircleLevelView.h
//
//  Created by Robert Ryan on 10/28/17.

#import <UIKit/UIKit.h>

IB_DESIGNABLE
@interface CircleLevelView : UIView

/// Percent filled
///
/// Value between 0.0 and 1.0.

@property (nonatomic)         IBInspectable CGFloat percent;

/// Text to show up in center of view
///
/// Value between 0.0 and 1.0.

@property (nonatomic, strong) IBInspectable NSString *text;

@end

和

//  CircleLevelView.m
//
//  Created by Robert Ryan on 10/28/17.

#import "CircleLevelView.h"

@interface CircleLevelView()
@property (nonatomic, weak) CAShapeLayer *circleMask;
@property (nonatomic, weak) UILabel *label;
@property (nonatomic, weak) UIView *fillView;

@end

@implementation CircleLevelView

@synthesize percent = _percent;

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];

    [self configure];

    return self;
}

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];

    [self configure];

    return self;
}

- (instancetype)init {
    return [self initWithFrame:CGRectZero];
}

- (void)configure {
    self.clipsToBounds = true;

    UILabel *fillView = [[UILabel alloc] init];
    fillView.translatesAutoresizingMaskIntoConstraints = false;
    fillView.backgroundColor = [UIColor colorWithRed:169.0 / 255.0
                                               green:208.0 / 255.0
                                                blue:66.0 / 255.0
                                               alpha:1.0];
    [self addSubview:fillView];
    self.fillView = fillView;

    UILabel *label = [[UILabel alloc] init];
    label.translatesAutoresizingMaskIntoConstraints = false;
    label.backgroundColor = [UIColor clearColor];
    label.textColor = [UIColor blackColor];
    label.textAlignment = NSTextAlignmentCenter;
    [self addSubview:label];
    self.label = label;

    [NSLayoutConstraint activateConstraints:@[
        [label.topAnchor constraintEqualToAnchor:self.topAnchor],
        [label.bottomAnchor constraintEqualToAnchor:self.bottomAnchor],
        [label.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
        [label.trailingAnchor constraintEqualToAnchor:self.trailingAnchor],
        [fillView.topAnchor constraintEqualToAnchor:self.topAnchor],
        [fillView.bottomAnchor constraintEqualToAnchor:self.bottomAnchor],
        [fillView.leadingAnchor constraintEqualToAnchor:self.leadingAnchor],
        [fillView.trailingAnchor constraintEqualToAnchor:self.trailingAnchor]
    ]];

    CAShapeLayer *circleMask = [CAShapeLayer layer];
    circleMask.fillColor = [UIColor whiteColor].CGColor;
    circleMask.strokeColor = [UIColor blackColor].CGColor;
    circleMask.lineWidth = 0;
    self.layer.mask = circleMask;
    self.circleMask = circleMask;
}

- (void)layoutSubviews {
    [super layoutSubviews];

    CGPoint center = CGPointMake(self.bounds.origin.x + self.bounds.size.width / 2.0, self.bounds.origin.y + self.bounds.size.height / 2.0);
    CGFloat radius = MIN(self.bounds.size.width, self.bounds.size.height) / 2.0;
    self.circleMask.path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:0 endAngle:M_PI * 2.0 clockwise:true].CGPath;

    [self updatePercentFill];
}

- (void)updatePercentFill {
    CGFloat circleHeight = MIN(self.bounds.size.width, self.bounds.size.height);
    CGFloat percentHeight = circleHeight * self.percent;
    self.fillView.frame = CGRectMake(0,
                                     (self.bounds.size.height - circleHeight) / 2 + (circleHeight - percentHeight),
                                     self.bounds.size.width,
                                     circleHeight);
}

// MARK: - Custom Accessor Methods

- (CGFloat)percent {
    return _percent;
}

- (void)setPercent:(CGFloat)percent {
    _percent = percent;

    [self updatePercentFill];
}

- (NSString *)text {
    return self.label.text;
}

- (void)setText:(NSString *)text {
    self.label.text = text;
}

@end

产量：

Answer 2

如果你知道和弦位置，你可以通过设置剪辑区域然后填充圆圈来填充和弦。

要计算和弦的位置以给出x％的面积，你需要做一些几何/三角学。每个不穿过中心的弦和中心形成等腰三角形，并且该三角形的两个边是半径的，限定了圆的一部分。因此，一个不通过中心的和弦一侧的区域是三角形和一个区段的面积差异，你可以计算出和弦如何划分区域或者和弦需要分割的区域。特定比例的区域。

如果这一切听起来像gobbledegook尝试查找和弦几何，你无疑会找到有用的图表和公式的书籍/网站。

HTH

如何绘制圆形物镜的百分比c

2 个答案: