问似乎无法摆脱UIBezierPath中的行
EN

Stack Overflow用户

提问于 2013-07-16 20:17:25

回答 2查看 532关注 0票数 1

好吧，所以我需要一个圆形三角形。所以我所做的就是使用一种类似于我在其他矢量绘图程序中使用的技术。绘制三角形并使用笔画创建圆角。工作也像一个魅力，直到我需要减少阿尔法的颜色用来填充和笔画的UIBezierPath。出于某种原因，我一直得到这个嵌入的轮廓，它与填充和笔画的颜色不一样。不知怎么的，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“。我想我可以画出圆角三角形，把曲线加到拐角处，但我只是好奇为什么这个happens.Thanks预先.

iphone

ios

core-graphics

uibezierpath

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-07-16 22:36:40

这条线是因为你的笔画和填充是绘制到相同的像素。因为笔画和填充都是部分透明的，颜色就会累积起来。

解决这个问题的一种方法就是创建一条勾勒出你的圆角三角形的路径，然后填充它而不用抚摸它。

下面是一个类别的接口，它创建了一个概述圆形多边形的路径：

@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会使三角形旋转四分之一圈。把它设为零会给你一个直角三角形。

票数 2

Stack Overflow用户

发布于 2013-07-16 21:39:22

如果必须进行笔划，请将对[UIBezierPath stroke]的调用更改如下：

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

这应该能达到你想要的效果(我想-还没能测试)

这是一个猜测，但我想你在这里看到的本质上是两层半透明的白色，一层画在另一层上面。当三角形刚刚被填充时，它将是你所期望的。当你笔画的时候，它画的颜色是一样的--但它是在现有颜色的基础上添加的，而不是替换它，这就是如果你以前在油漆程序或类似的程序中这样做的效果。因此，在笔划和填充重叠的地方，你会得到比你想要的更强的白色。仅仅使用填充本身就可以解决这个问题，但可能不会得到你想要的效果。

如果你需要一个视觉演示，我的意思，你可以这样做，在Photoshop。创建一个黑色背景的新图像，并在上面创建一个新的图层，设置为50%的不透明度。在上面画一个白色的正方形(由于不透明，它看起来是灰色的)。然后，在不改变层的情况下，画一条线穿过它。您不会看到这条线，因为它正在替换现有的颜色--这就是您期望的代码出现的情况。然后，在上面添加另一层，也设置为50%的不透明度。在这一层画一条线，穿过正方形。你会看到这条线是一种更亮的灰色。这是加性的，两个层上的白色重叠--您的代码正在创建的效果。

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/17691035

复制

flutter的列表下拉刷新

flutter

flutter的列表下拉刷新需要借助一个组件来实现，这个组件的名字是RefreshIndicator,直译过来就是刷新指示灯。

挥刀北上

2021/01/07

4.8K0