ChatGPT解决这个技术问题 Extra ChatGPT

如何绘制只是一个圆圈的自定义 UIView - iPhone 应用程序

我将如何绘制一个实际上只是一个球(2D 圆)的自定义 UIView?我会覆盖drawRect方法吗?有人可以告诉我绘制蓝色圆圈的代码吗?

另外,可以在类本身中更改该视图的框架吗?还是我需要从不同的班级更改框架?

(只是试图设置一个弹跳的球)


i
idmean

你可以使用 QuartzCore 做一些这样的事情——

self.circleView = [[UIView alloc] initWithFrame:CGRectMake(10,20,100,100)];
self.circleView.alpha = 0.5;
self.circleView.layer.cornerRadius = 50;  // half the width/height
self.circleView.backgroundColor = [UIColor blueColor];

仅供参考,为了使您的视图成为使用 QuartCore 的圆形,您的角半径需要是框架高度/宽度的一半。这是最简单的制作圆圈的方法,但不一定是最有效的。如果性能至关重要,drawRect 可能会产生更好的结果。
它是。 100 是高度/宽度。
是的,抱歉没有针对你,Kal。我向 StanLe 提到了这一点,以防他想使用不同大小的视图。
如果您的 circleView 尺寸不是 100X100,cornerRadius 应该是(新尺寸)/2
但我注意到带有圆角半径的圆有时会略微“平坦”/剪裁边缘。至少在与边框一起使用时。知道为什么吗?半径正好是视图大小的一半。我认为这可能是剪辑问题,但似乎不是那样,即使使用较小的子层也尝试过 - 仍然具有相同的效果。
S
Steve

我会覆盖drawRect方法吗?

是的:

- (void)drawRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextAddEllipseInRect(ctx, rect);
    CGContextSetFillColor(ctx, CGColorGetComponents([[UIColor blueColor] CGColor]));
    CGContextFillPath(ctx);
}

另外,可以在类本身中更改该视图的框架吗?

理想情况下不是,但你可以。

还是我需要从不同的班级更改框架?

我会让家长控制它。


如何设置自定义颜色,而不仅仅是蓝色?我尝试像这样使用白色和蓝色: ([self.colorOfCircle CGColor]) 但没有任何反应:\
@loldop self.colorOfCircle 是 UIColor 吗?设置好了吗?如果您在该行上放置一个断点并查看该值,这是您所期望的吗?如果您在事后设置,您将不得不使包含圆圈的视图部分无效。
@gaussblurinc 使用 CGContextSetFillColorWithColor(ctx, self.colorOfCircle.CGColor);,解决方案 CGColorGetComponents 中提出的方法仅适用于某些颜色,请参阅 stackoverflow.com/questions/9238743/…
请注意任何让自己陷入困境的人。我不小心将 self.frame 用于椭圆,而不是 rect。正确的值为 self.bounds。哦! :)
j
jomafer

这是另一种使用 UIBezierPath 的方法(可能为时已晚^^)创建一个圆圈并用它遮罩 UIView,如下所示:

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
view.backgroundColor = [UIColor blueColor];

CAShapeLayer *shape = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:view.center radius:(view.bounds.size.width / 2) startAngle:0 endAngle:(2 * M_PI) clockwise:YES];
shape.path = path.CGPath;
view.layer.mask = shape;

真的没有必要把那个形状层做成蒙版;你可以直接使用形状层作为视图层并给它一个填充颜色。口罩可能要贵得多。
UIView 的图层是 CALayer,所以我们如何在这个图层上绘制一个形状。我想我们将形状图层添加到视图图层而不掩盖它??
您可以继承 UIView 并覆盖 layerClass 类方法以使其成为形状层。
@JesseRusak,我对您的建议(在 UIView 的图层本身上设置形状)遇到的问题是您必须无法正确使用 backgroundColor。您需要应用填充颜色并将背景颜色设置为 clearColor,这意味着 UIView 的用户将无法自然地设置背景颜色。
s
shim

我对 Swift 扩展的贡献:

extension UIView {
    func asCircle() {
        self.layer.cornerRadius = self.frame.width / 2;
        self.layer.masksToBounds = true
    }
}

只需拨打 myView.asCircle()


在此答案中将 masksToBounds 设置为 true 和使用 self 都是可选的,但它仍然是最短和最好的解决方案
M
Mobile Developer

Swift 3 - 自定义类,易于重用。它使用在 UI builder 中设置的 backgroundColor

import UIKit

@IBDesignable
class CircleBackgroundView: UIView {

    override func layoutSubviews() {
        super.layoutSubviews()
        layer.cornerRadius = bounds.size.width / 2
        layer.masksToBounds = true
    }

}

C
Cheok Yan Cheng

斯威夫特 3 类:

import UIKit

class CircleView: UIView {

    override func draw(_ rect: CGRect) {
        guard let context = UIGraphicsGetCurrentContext() else {return}
        
        context.addEllipse(in: rect)
        context.setFillColor(UIColor.blue.cgColor)
        context.fillPath()
    }           
}

s
shim

绘制圆形(和其他形状)的另一种方法是使用蒙版。您可以通过以下方式绘制圆形或其他形状:首先,制作您需要的形状的蒙版,其次,提供您颜色的正方形,然后,将蒙版应用于这些颜色的正方形。您可以更改蒙版或颜色以获得新的自定义圆形或其他形状。

#import <QuartzCore/QuartzCore.h>

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *area1;
@property (weak, nonatomic) IBOutlet UIView *area2;
@property (weak, nonatomic) IBOutlet UIView *area3;
@property (weak, nonatomic) IBOutlet UIView *area4;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.area1.backgroundColor = [UIColor blueColor];
    [self useMaskFor: self.area1];

    self.area2.backgroundColor = [UIColor orangeColor];
    [self useMaskFor: self.area2];

    self.area3.backgroundColor = [UIColor colorWithRed: 1.0 green: 0.0 blue: 0.5 alpha:1.0];
    [self useMaskFor: self.area3];

    self.area4.backgroundColor = [UIColor colorWithRed: 1.0 green: 0.0 blue: 0.5 alpha:0.5];
    [self useMaskFor: self.area4];        
}

- (void)useMaskFor: (UIView *)colorArea {        
    CALayer *maskLayer = [CALayer layer];
    maskLayer.frame = colorArea.bounds;
    UIImage *maskImage = [UIImage imageNamed:@"cirMask.png"];
    maskLayer.contents = (__bridge id)maskImage.CGImage;
    colorArea.layer.mask = maskLayer;
}

@end

这是上面代码的输出:

https://i.stack.imgur.com/VOxz3.png


u
user8675

懒惰的人还有另一种选择。您可以在 Interface Builder 中为您的视图设置layer.cornerRadius键路径。例如,如果您的视图的 width = height 为 48,则设置 layer.cornerRadius = 24

https://i.stack.imgur.com/JHuRP.png

但是,这仅适用于视图 (width/height is fixed) 的静态大小并且它没有在界面构建器中显示圆圈的情况。


s
shim

斯威夫特 3 - Xcode 8.1

@IBOutlet weak var myView: UIView!

override func viewDidLoad() {
    super.viewDidLoad() 

    let size:CGFloat = 35.0
    myView.bounds = CGRect(x: 0, y: 0, width: size, height: size)
    myView.layer.cornerRadius = size / 2
    myView.layer.borderWidth = 1
    myView.layer.borderColor = UIColor.Gray.cgColor        
}