如何快速绘制简单的圆角矩形（圆角）

Posted 2023-02-23

【中文标题】如何快速绘制简单的圆角矩形（圆角）

【英文标题】：How to draw a simple rounded rect in swift (rounded corners)

【发布时间】：2015-05-21 08:47:03

【问题描述】：

我设法画了一个矩形 :-) 但我不知道如何画一个圆角矩形。

有人可以帮我用下面的代码如何四舍五入吗？

let canvas = UIGraphicsGetCurrentContext()
rec = CGRectMake(0, 0, 40, 40);

//var maskPath = UIBezierPath(roundedRect: rec, byRoundingCorners: .BottomLeft | .BottomRight, cornerRadii: CGSize(width: 3, height: 3))

CGContextAddRect(canvas, rec);
CGContextFillPath(canvas);

【问题讨论】：

参考此链接：***.com/questions/25591389/…

谢谢，但这是指圆形 UIView 和其中的一个矩形。我真的很想对矩形本身进行四舍五入。

我编辑了我的帖子的内容，我相信这是您现在正在寻找的内容。

【参考方案1】：

//把这段代码放在你的drawRect中

目标 - C

 - (void)drawRect:(CGRect)rect


CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSaveGState(ctx);


 CGPathRef clippath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(x,y, width, height) cornerRadius:6].CGPath;
CGContextAddPath(ctx, clippath);

CGContextSetFillColorWithColor(ctx, self.color.CGColor);

CGContextClosePath(ctx);
CGContextFillPath(ctx);

[self.color set];


[_path closePath]; // Implicitly does a line between p4 and p1
[_path fill]; // If you want it filled, or...
[_path stroke]; // ...if you want to draw the outline.
CGContextRestoreGState(ctx);

斯威夫特 3

func drawRect(rect : CGRect)

// Size of rounded rectangle
let rectWidth = rect.width
let rectHeight = rect.height

// Find center of actual frame to set rectangle in middle
let xf:CGFloat = (self.frame.width  - rectWidth)  / 2
let yf:CGFloat = (self.frame.height - rectHeight) / 2

let ctx: CGContext = UIGraphicsGetCurrentContext()!
ctx.saveGState()

let rect = CGRect(x: xf, y: yf, width: rectWidth, height: rectHeight)
let clipPath: CGPath = UIBezierPath(roundedRect: rect, cornerRadius: rectCornerRadius).cgPath

ctx.addPath(clipPath)
ctx.setFillColor(rectBgColor.cgColor)




ctx.closePath()
ctx.fillPath()
ctx.restoreGState()

【讨论】：

我试图快速翻译这个，但在将 UIBezierPath 转换为 CGPath 时出错。您能否在我现有的代码中添加缺少的语句？

clippath=(UIBezierPath(roundedRect: CGRectMake(0, 0, 0, 0),cornerRadius: 0)).CGPath

完美。非常感谢。这就是我要找的。​​span>

解决方案中的魔术变量_path

让 ctx: CGContext = UIGraphicsGetCurrentContext()! ------------- 当 build 为 nil 值时如何修复

【参考方案2】：

如何使用 BezierPath 创建圆角矩形

 var roundRect = UIBezierPath(roundedRect: <CGRect>, byRoundingCorners: <UIRectCorner>, cornerRadii: <CGSize>)

或者举个例子：

var roundRect = UIBezierPath(roundedRect: CGRectMake(0, 0, 100, 100), byRoundingCorners:.AllCorners, cornerRadii: CGSizeMake(16.f, 16.f))

斯威夫特 5

var roundRect = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 100, height: 100), byRoundingCorners:.allCorners, cornerRadii: CGSize(width: 16.0, height: 16.0))

【讨论】：

这不是我要找的。你用 UIImageView 做一些事情。

非常感谢。我赞成你的，因为它是正确的答案。我接受了 mukus 的回答，因为他回复得更快。谢谢

【参考方案3】：

@muku 在 Swift 4.x+ 中回答：

override func draw(_ rect: CGRect) 
  super.draw(rect)

  let clipPath = UIBezierPath(roundedRect: rect, cornerRadius: 6.0).cgPath

  let ctx = UIGraphicsGetCurrentContext()!
  ctx.addPath(clipPath)
  ctx.setFillColor(UIColor.red.cgColor)

  ctx.closePath()
  ctx.fillPath()

【讨论】：

CGPath 现在是 cgPath

这不是 swift 4.

让 ctx = UIGraphicsGetCurrentContext()！ ------------- 当 build 为 nil 值时如何修复

最简单的解决方案

【参考方案4】：

斯威夫特 5、4

ios 11

override func draw(_ rect: CGRect) 
  super.draw(rect)

  guard let context = UIGraphicsGetCurrentContext() else  return 

  context.saveGState()
  defer  context.restoreGState() 

  let path = UIBezierPath(
    roundedRect: rect,
    byRoundingCorners: [.topLeft, .topRight],
    cornerRadii: CGSize(width: 4, height: 4)
  )

  context.addPath(path.cgPath)
  context.closePath()

  context.setStrokeColor(UIColor.red.cgColor)
  context.strokePath()

【参考方案5】：

SWIFT 3.x + 4.0我已经修改了 Swift 3 的示例，并添加了几行来集中 UIView 中的矩形

func roundRect()

    // Size of rounded rectangle
    let rectWidth:CGFloat = 100
    let rectHeight:CGFloat = 80

    // Find center of actual frame to set rectangle in middle
    let xf:CGFloat = (self.frame.width  - rectWidth)  / 2
    let yf:CGFloat = (self.frame.height - rectHeight) / 2

    let ctx: CGContext = UIGraphicsGetCurrentContext()!
    ctx.saveGState()

    let rect = CGRect(x: xf, y: yf, width: rectWidth, height: rectHeight)
    let clipPath: CGPath = UIBezierPath(roundedRect: rect, cornerRadius: rectCornerRadius).cgPath

    ctx.addPath(clipPath)
    ctx.setFillColor(rectBgColor.cgColor)




    ctx.closePath()
    ctx.fillPath()
    ctx.restoreGState()

完整代码和截图可在：http://lab.dejaworks.com/uiview-with-rounded-background-designable-in-storyboard/

【讨论】：

@AbdulYasin“不那么令人惊讶”原谅？如果你没有任何基本技能，你不能为此责怪别人。我添加了一个带有工作代码和屏幕截图的链接。您可以检查并查看哪些内容不适合您。问候。

@Trevor 干得好，谢谢！但是，我想知道是否可以扩展您的解决方案，以便每个角落都可以有不同的半径？

【参考方案6】：

override func draw(_ rect: CGRect) 

    let bezierPath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 40.0, height: 40.0), cornerRadius: 3.0)
    UIColor.yellow.setFill()
    bezierPath.fill()