【问题标题】:Draw a semi-circle button iOS绘制一个半圆形按钮 iOS
【发布时间】:2015-10-23 18:19:07
【问题描述】:

我正在尝试绘制一个半圆形按钮。我在绘制半圆并将其附加到我在 xcode 中制作的按钮时遇到了麻烦。 xcode 中的按钮具有将其固定到屏幕底部并居中的约束。我在我的视图控制器中引用该按钮,然后尝试将其覆盖为一个半圆,如下所示。我得到一个空白按钮。我还硬编码了按钮所在故事板的坐标。有没有更好的方法来做到这一点?

let circlePath = UIBezierPath.init(arcCenter: CGPoint(x: 113.0, y: 434.0),
radius: 10.0, startAngle: 0.0, endAngle: CGFloat(M_PI), clockwise: true)

let circleShape = CAShapeLayer()
circleShape.path = circlePath.CGPath

sunButton.layer.mask = circleShape

【问题讨论】:

  • 澄清一下,这是我在 viewDidLoad 上调用的一个函数,对我的按钮的引用是 sunButton!

标签: ios swift


【解决方案1】:

问题在于您的形状层位于按钮边界之外。如果您只是将形状层添加为按钮层的子视图,您会看到问题:

button.layer.addSublayer(circleShape)

您必须调整圆弧中心点,使圆弧位于按钮的范围内:

let circlePath = UIBezierPath.init(arcCenter: CGPointMake(button.bounds.size.width / 2, 0), radius: button.bounds.size.height, startAngle: 0.0, endAngle: CGFloat(M_PI), clockwise: true)
let circleShape = CAShapeLayer()
circleShape.path = circlePath.CGPath
button.layer.mask = circleShape

你会得到这个:

【讨论】:

  • 这对我很有帮助,但我遇到了问题。该按钮也可以在彩色区域(按钮的实际区域)之外单击我如何​​禁用此功能?
  • 嗨@UmairAfzal。在您的 UIButton 子类中,您可以覆盖 hitTest(_:withEvent:) 来定义您的按钮的哪个区域是可点击的。详情请看本教程:planet1107.net/blog/custom-shape-uibutton-tutorial
  • @joern 嗨,如果我想要这条弧的反转,我该怎么办?
  • @Elan 将clockwise 设置为false
  • @joern 如果我这样做,我的视图对我不可见,我使用的代码如下:-' [path addArcWithCenter:CGPointMake(size.width / 2.0, 0) radius:self .bounds.size.height startAngle:0 endAngle:M_PI 顺时针:false]; CAShapeLayer *shapeView = [[CAShapeLayer alloc] init]; shapeView.fillColor=[UIColor greenColor].CGColor; shapeView.path=[路径 CGPath]; self.layer.mask=shapeView; '
【解决方案2】:

Swift 5 更新:

let circlePath = UIBezierPath.init(arcCenter: CGPoint(x: button.bounds.size.width / 2, y: 0), radius: button.bounds.size.height, startAngle: 0.0, endAngle: .pi, clockwise: true)
let circleShape = CAShapeLayer()
circleShape.path = circlePath.cgPath
button.layer.mask = circleShape

【讨论】:

    【解决方案3】:

    斯威夫特 5:

        // semiCircleDown
      let circlePath =  UIBezierPath(arcCenter: CGPoint(x: shapeView.bounds.size.width/2, y: 0), radius: shapeView.bounds.size.height, startAngle: 0, endAngle: .pi, clockwise: true).cgPath
    
            //semiCircleUp
      let circlePath =  UIBezierPath(arcCenter: CGPoint(x: shapeView.bounds.size.width/2, y: 0), radius: shapeView.bounds.size.height, startAngle: 2 * .pi, endAngle: .pi, clockwise: true).cgPath
    
            //quarterCircleRightDown
      let circlePath =  UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: shapeView.bounds.size.width, startAngle: 2 * .pi, endAngle: .pi * 3/2, clockwise: true).cgPath
    
            //quarterCircleLeftDown 
      let circlePath =  UIBezierPath(arcCenter: CGPoint(x: shapeView.bounds.size.width, y: 0), radius: shapeView.bounds.size.width, startAngle: .pi * 3/2, endAngle: .pi, clockwise: true).cgPath
    
            quarterCircleRightUp
      let circlePath = UIBezierPath(arcCenter: CGPoint(x: 0, y: shapeView.bounds.size.height), radius: shapeView.bounds.size.width, startAngle: 0, endAngle: .pi/2, clockwise: false).cgPath
    
            //quarterCircleLeftUp
      let circlePath = UIBezierPath(arcCenter: CGPoint(x: shapeView.bounds.size.width, y: shapeView.bounds.size.height), radius: shapeView.bounds.size.width, startAngle: .pi/2, endAngle: .pi, clockwise: false).cgPath
    
    let shape = CAShapeLayer()
    shape.path = circlePath.cgPath
    shapeView.layer.mask = shape
    

    【讨论】:

    • 什么是圆形?
    猜你喜欢
    • 1970-01-01
    • 2019-02-27
    • 2015-02-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-03-04
    • 2017-06-06
    • 2023-03-28
    相关资源
    最近更新 更多