iphone - 似乎无法摆脱UIBezierPath中的限制

Question

好，所以我需要一个圆角三角形。因此，我所做的就是使用与其他矢量绘图程序中使用的技术类似的技术。绘制三角形并使用笔触创建圆角。就像魅力一样，直到我需要减少用于填充和描边UIBezierPath的颜色的Alpha值为止。由于某种原因，我不断得到与插图的颜色不同的插图。不知何故，alpha值未得到尊重。也许我在这里忽略了一些愚蠢的事情，但是尝试一下，因为我可能无法获得所有alpha值小于1的三角形。这就是我得到的:

这是简单的代码:

    - (void)drawRect:(CGRect)rect
{
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint: CGPointMake(63.5, 10.5)];
    [path addLineToPoint: CGPointMake(4.72, 119.5)];
    [path addLineToPoint: CGPointMake(122.28, 119.5)];
    [path addLineToPoint: CGPointMake(63.5, 10.5)];
    [path closePath];
    path.miterLimit = 7;

    path.lineCapStyle = kCGLineCapRound;

    path.lineJoinStyle = kCGLineJoinRound;
    path.lineWidth = 8;

    UIColor *whiteAlph5 = [UIColor colorWithWhite:0.6 alpha:0.5];

    [whiteAlph5 setFill];
    [whiteAlph5 setStroke];


    [path fill];
    [path stroke];
}

如果这是我为填充和描边设置的唯一颜色，我不明白为什么该行不是“whiteAlpha5”。我想我可以画出圆角三角形，然后将曲线添加到拐角处，但是我很好奇为什么会发生这种情况。

Answer 1

该行是因为您的笔触和填充都绘制到相同的像素。由于笔触和填充都是部分透明的，因此颜色会累积。

解决此问题的一种方法是只创建一个轮廓您的圆角三角形的路径，然后填充它而不会对其进行描边。

这是类别的界面，该类别创建概述圆形多边形的路径:

@interface UIBezierPath (MyRoundedPolygon)

+ (UIBezierPath *)my_roundedPolygonWithSides:(int)sides center:(CGPoint)center
    vertexRadius:(CGFloat)vertexRadius cornerRadius:(CGFloat)cornerRadius
    rotationOffset:(CGFloat)rotationOffset;

@end

这是实现:

@implementation UIBezierPath (MyRoundedPolygon)

static CGPoint vertexForPolygon(int sides, CGPoint center, CGFloat circumradius, CGFloat index) {
    CGFloat angle = index * 2 * M_PI / sides;
    return CGPointMake(center.x + circumradius * cosf(angle),
        center.y + circumradius * sinf(angle));
}

+ (UIBezierPath *)my_roundedPolygonWithSides:(int)sides center:(CGPoint)center
    vertexRadius:(CGFloat)vertexRadius cornerRadius:(CGFloat)cornerRadius
    rotationOffset:(CGFloat)rotationOffset
{
    CGFloat circumradius = vertexRadius + cornerRadius;
    CGPoint veryLastVertex = vertexForPolygon(sides, center, circumradius, rotationOffset - 1);
    CGPoint currentVertex = vertexForPolygon(sides, center, circumradius, rotationOffset);
    CGMutablePathRef cgpath = CGPathCreateMutable();
    CGPathMoveToPoint(cgpath, NULL, (veryLastVertex.x + currentVertex.x) / 2,
        (veryLastVertex.y + currentVertex.y) / 2);
    for (CGFloat i = 0; i < sides; ++i) {
        CGPoint nextVertex = vertexForPolygon(sides, center, circumradius,
            i + 1 + rotationOffset);
        CGPathAddArcToPoint(cgpath, NULL, currentVertex.x, currentVertex.y,
            nextVertex.x, nextVertex.y, cornerRadius);
        currentVertex = nextVertex;
    }
    CGPathCloseSubpath(cgpath);
    UIBezierPath *path = [self bezierPathWithCGPath:cgpath];
    CGPathRelease(cgpath);
    return path;
}

@end

使用方法如下:

@implementation MyView

- (void)drawRect:(CGRect)rect
{
    CGRect bounds = self.bounds;
    CGPoint center = CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds));
    UIBezierPath *path = [UIBezierPath my_roundedPolygonWithSides:3 center:center
        vertexRadius:70 cornerRadius:8 rotationOffset:0.25];
    [[UIColor colorWithWhite:0.6 alpha:0.5] setFill];
    [path fill];
}

@end

结果如下:

请注意，将 rotationOffset设置为0.25可将三角形旋转四分之一圈。将其设置为零将为您提供一个指向右的三角形。