Question

如何在iOS（Objective-c）中创建如下图所示的标签？

我的问题不是所有的角落，因为我可以围绕左上角和左上角。通过编写如下代码来实现右下角：

CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = [UIBezierPath bezierPathWithRoundedRect:self.customView.bounds
                                       byRoundingCorners:UIRectCornerBottomRight | UIRectCornerTopLeft
                                             cornerRadii:(CGSize){7.0, 7.0}].CGPath;
self.customLabel.layer.mask = maskLayer;

结果如下：

现在如何编写右上角和右上角的代码？左下角到达目标？

Answer 1

<强>更新

我没有在我的方程中使用高度作为变量，它可能会影响结果。

更好的结果

- (void)drawRect:(CGRect)rect
{
    CGFloat curveWidth = 40;
    CGFloat width = self.frame.size.width;
    CGFloat height = self.frame.size.height;

//    UIEdgeInsets insets = {0, curveWidth, 0, curveWidth};
//    [super drawTextInRect:UIEdgeInsetsInsetRect(rect, insets)];

    UIBezierPath *path = [UIBezierPath bezierPath];
    UIColor *fillColor = [UIColor orangeColor];
    [fillColor setFill];

    [path moveToPoint:CGPointMake(0, height)];
    [path addCurveToPoint:CGPointMake(curveWidth*2, 0) controlPoint1:CGPointMake(curveWidth*0.75, height) controlPoint2:CGPointMake(curveWidth*0.25, 0)];

    [path addLineToPoint:CGPointMake(width, 0)];
    [path addCurveToPoint:CGPointMake(width-curveWidth*2, height) controlPoint1:CGPointMake(width-curveWidth*0.75, 0) controlPoint2:CGPointMake(width-curveWidth*0.25, height)];

    [path closePath];
    [path fill];

    [super drawRect: rect];
}

原始答案：

我为你写了代码。按照步骤：

通过子类化创建自定义UILabel。（以下代码）
使用界面构建器将UILabel添加到视图中。
添加约束。
在“标识符”检查器选项卡中，将类更改为。

-

@implementation CurvedLabel

- (id)initWithCoder:(NSCoder *)aDecoder
{
    if (self = [super initWithCoder:aDecoder])
    {

    }
    return self;
}

- (void)drawRect:(CGRect)rect
{
    CGFloat curveWidth = 30;
    CGFloat width = self.frame.size.width;
    CGFloat height = self.frame.size.height;

//    UIEdgeInsets insets = {0, curveWidth, 0, curveWidth};
//    [super drawTextInRect:UIEdgeInsetsInsetRect(rect, insets)];

    UIBezierPath *path = [UIBezierPath bezierPath];
    UIColor *fillColor = [UIColor orangeColor];
    [fillColor setFill];

    [path moveToPoint:CGPointMake(0, height)];
    [path addCurveToPoint:CGPointMake(curveWidth*2, 0) controlPoint1:CGPointMake(curveWidth, height) controlPoint2:CGPointMake(0, 0)];

    [path addLineToPoint:CGPointMake(width, 0)];
    [path addCurveToPoint:CGPointMake(width-curveWidth*2, height) controlPoint1:CGPointMake(width-curveWidth, 0) controlPoint2:CGPointMake(width, height)];

    [path closePath];
    [path fill];

    [super drawRect: rect];
}

@end

Answer 2

我不相信有任何简单的方法，您可以使用png文件，如果这不是您应该查看UIBezierPath的选项，请检查此链接：ios drawing concepts

Answer 3

当然可以使用UIBezierPath进行操作。我做了一个非常简单的设置你可以使用。

// This is the parallelogram's corner structure 
//    1------2
//   /      /
//  /      /
// 4------3 

 int xOffset = 150; // x Offset on the parent view - here self.view
    int yOffset = 50; // y Offset on the parent view - here self.view
    int flatten = 50; // The difference from center of curve to spike point (try to adjust it and see what it does)
    int width = 200; 
    int height = 100;

    UIBezierPath * maskLayer = [UIBezierPath bezierPath];

    // Start at corner 1
    [maskLayer moveToPoint: CGPointMake(xOffset+flatten, yOffset)];

    // Go to corner 2
    [maskLayer addLineToPoint: CGPointMake(xOffset+width+flatten, yOffset)];

    // Curve it down to corner 3
    [maskLayer addCurveToPoint: CGPointMake(xOffset+width-flatten, height+yOffset) controlPoint1: CGPointMake(xOffset+width, yOffset) controlPoint2:CGPointMake(xOffset+width, height+yOffset)];

    // Go straight to corner 4
    [maskLayer addLineToPoint: CGPointMake(xOffset, height+yOffset)];

    // Curve it back to corner 1
    [maskLayer addCurveToPoint: CGPointMake(xOffset+(2*flatten), yOffset)  controlPoint1:CGPointMake(xOffset+flatten, yOffset+height) controlPoint2: CGPointMake(xOffset+flatten, yOffset)];

    // Create the shape and fill it with a color 
    CAShapeLayer *maskShapeLayer = [CAShapeLayer layer];
    maskShapeLayer.path = maskLayer.CGPath;
    maskShapeLayer.fillColor = [UIColor redColor].CGColor;

    // add the layer to a view's layer (here self.view.layer)
    [self.view.layer addSublayer:maskShapeLayer];

如果你想让两个p更加圆润，你可以使addCurveToPoint点的y值更接近平行四边形的y中心轴（高度/ 2）。

Answer 4

您必须使用addCurveToPoint的{{1}}通过提供UIBezierPath和controlPoint1

来使其变得曲线玲珑

供参考，您可以查看Apple's Documentation

此外，这也是一个有用的reference。您将不得不使用UIBezierPath的属性

在Objective C，iOS中创建像图像一样的标签

4 个答案: