1

好的，所以我需要一个圆角三角形。所以我所做的是使用类似于我在其他矢量绘图程序中使用的技术。绘制三角形并使用笔触创建圆角。也像一个魅力一样工作，直到我需要减少用于填充和描边 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 ”以外的任何东西。我想我可以画出圆角三角形，将曲线添加到角落，但我只是好奇为什么会发生这种情况。提前谢谢......

4

2 回答 2

4

如果您必须中风，请将您的呼叫更改为[UIBezierPath stroke]：

[path fill];
[path strokeWithBlendMode:kCGBlendModeCopy alpha:1.0];

这应该达到你想要的效果（我认为 - 无法测试它）

这有点猜测，但我认为您在这里看到的本质上是两层半透明的白色，一层绘制在另一层之上。当三角形刚刚填充时，这将是您所期望的。当您描边时，它会绘制相同的颜色 - 但它会将其添加到现有颜色之上，而不是替换它，如果您之前在绘画程序或类似程序中这样做过，您可能会期望这种效果。因此，在描边和填充重叠的地方，你会得到比你想要的更强烈的白色。仅使用 fill 本身可以解决此问题，但可能无法获得您所追求的圆形效果。

如果您需要我的意思的可视化演示，您可以在 Photoshop 中执行此操作。创建一个黑色背景的新图像并在其上方创建一个新图层，设置为 50% 不透明度。在上面画一个白色方块（由于不透明度，它看起来是灰色的）。然后，在不改变图层的情况下，画一条穿过它的线。你不会看到这条线，因为它正在替换现有的颜色 - 这是你期望在你的代码中发生的。然后，在其上方添加另一层，同样设置为 50% 的不透明度。在这个层上画一条线，穿过正方形。你会看到这条线是更亮的灰色。这是叠加的，两层上的白色重叠 - 您的代码正在创建的效果。

于 2013-07-17T05:39:22.990 回答
2

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

解决此问题的一种方法是创建一个勾勒出圆角三角形的路径，并在不抚摸它的情况下填充它。

下面是一个类别的界面，它创建了一个勾勒出圆形多边形的路径：

@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 会使三角形旋转四分之一圈。将其设置为零将为您提供一个指向正确的三角形。

于 2013-07-17T06:36:40.820 回答