1

我正在尝试使用 Core Graphics 在黑色背景上绘制一个简单的网格图案。网格线将是绿色的。我目前正在图像上下文中创建和绘制，然后使用生成的图像来图案化我的视图背景：

    CGFloat gridSize = 45;
    UIGraphicsBeginImageContext(CGSizeMake(gridSize, gridSize));

    CGContextRef ctx = UIGraphicsGetCurrentContext();
    UIGraphicsPushContext(ctx);

    // Create black background fill.
    CGContextSetFillColorWithColor(ctx, [[UIColor colorWithRed:0.0 
                                                         green:0.0
                                                          blue:0.0
                                                         alpha:1.0] CGColor]);
    CGContextMoveToPoint(ctx, 0, 0);
    CGContextAddLineToPoint(ctx, gridSize, 0);
    CGContextAddLineToPoint(ctx, gridSize, gridSize);
    CGContextAddLineToPoint(ctx, 0, gridSize);
    CGContextAddLineToPoint(ctx, 0, 0);
    CGContextFillPath(ctx);

    // Set context variables for line drawing.
    CGContextSetBlendMode(ctx, kCGBlendModeNormal);
    CGContextSetStrokeColorWithColor(ctx, [[UIColor colorWithRed:0.0 
                                                           green:1.0
                                                            blue:0.0
                                                           alpha:1.0] CGColor]);
    CGContextSetLineWidth(ctx, 1);

    // Draw top and bottom grid lines.
    CGContextMoveToPoint(ctx, 0, 0);
    CGContextAddLineToPoint(ctx, gridSize, 0);
    CGContextMoveToPoint(ctx, gridSize, gridSize);
    CGContextAddLineToPoint(ctx, 0, gridSize);
    CGContextStrokePath(ctx);

    // Draw left and right grid lines.
    CGContextMoveToPoint(ctx, gridSize, 0);
    CGContextAddLineToPoint(ctx, gridSize, gridSize);
    CGContextMoveToPoint(ctx, 0, gridSize);
    CGContextAddLineToPoint(ctx, 0, 0);
    CGContextStrokePath(ctx);

    // Draw a "cross" in the center of the image to troubleshoot blending.
    CGContextMoveToPoint(ctx, 20, 20);
    CGContextAddLineToPoint(ctx, 40, 20);
    CGContextStrokePath(ctx);

    CGContextMoveToPoint(ctx, 30, 10);
    CGContextAddLineToPoint(ctx, 30, 30);
    CGContextStrokePath(ctx);

    UIGraphicsPopContext();

    UIImage *gridImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    // Set background color to a pattern based on the drawn image.
    [self setBackgroundColor:[[UIColor alloc] initWithPatternImage:gridImage]];

但是，此代码会导致以下结果：

网格线

请注意，在任何线的交点处都会出现较亮的区域。稍微随机放置在网格图案中的十字架被放在那里只是为了测试在不受图案边缘影响时是否仍然出现明亮区域（它们确实如此）。

我希望缓解的正是线路交叉点上的这些明亮区域。为了确保我没有不小心使用某种视觉错觉来欺骗自己，我检查了线条中间以及它们交叉处的像素颜色。

绿线中点的像素值：

  • 回复：0
  • 克：129
  • 乙：0

两条绿线相交处的像素值：

  • 回复：0
  • 克：191
  • 乙：0

我检查了有关混合模式的Apple Core Graphics文档，并确定默认混合模式是kCGBlendModeNormal，当使用 绘制颜色时alpha = 1，它应该“完全遮盖背景”以及任何以前绘制的颜色。虽然这是默认的混合模式，但我仍然在上面的代码中明确设置它，但我仍然看到这些明亮的方块。

我希望看到的是统一绿色的线条，大概是 RGB 配置文件：

  • 回复：0
  • 克：255
  • 乙：0

我错过了什么？

4

1 回答 1

1

看起来线条是用 50% 的 alpha 绘制的，但是是指定线条宽度的两倍。如果您的线宽为 1 像素，但使用整数坐标绘制水平线或垂直线，则会发生这种情况。

您的坐标指定了从开始到结束坐标的无限细线。然后，绘制的线应延伸到细线的两侧，宽度为笔划宽度的一半。在您的情况下，这意味着该线需要在网格的左侧和右侧或顶部和底部覆盖半个像素。由于只能绘制完整像素，因此将 alpha 降低到 50% 并改为绘制完整像素。

解决方案很简单：将 0.5 添加到所有坐标。

于 2012-06-25T17:26:43.760 回答