ios - CGRect 之间的像素间隙

Question

我正在绘制条形图，我有几个堆叠的 CGRects，它们直接彼此重叠(即一个矩形的 minY 是前一个矩形的 maxY)。然而，矩形之间仍然存在半透明的间隙。有没有什么办法解决这一问题？我发现在绘制接触相邻弧线时也会发生这种情况。

这是我的意思的截图:

通过放大，我已经确认这不仅仅是一种错觉，就像人们在相邻的红色和蓝色矩形之间发现的那样。我将不胜感激。

 var upToNowSegmentTotal: CGFloat = 0    
 for k in 0..<data[i].bars[j].segments.count {
      var segmentRect: CGRect = CGRect()

      if barDirection == "vertical" {
          let a: CGFloat = translateY(upToNowSegmentTotal)
          let b: CGFloat = translateY(upToNowSegmentTotal + data[i].bars[j].segments[k].length)
          upToNowSegmentTotal += data[i].bars[j].segments[k].length

          var rectY: CGFloat

          if a > b {
              rectY = b
          } else {
              rectY = a
          }

          segmentRect = CGRect(
              x: barWidthPosition,
              y: rectY,
              width: barWidthAbsolute,
              height: abs(a - b)
          )
      }
 }

忽略有关条形宽度的内容。这是 translateY 函数。基本上，它将绘图窗口中的坐标转换为绘制的 x/y 坐标。请记住，因为窗口/图形区域在绘制的矩形之间不会改变，所以相同的 y 输入将始终产生相同的结果。

private func translateY(y: CGFloat) -> CGFloat {
    if barsAreReversed {
        return graphingArea.minY + graphingArea.height * (y - graphingWindow.startValue) / (graphingWindow.length)
    } else {
        return graphingArea.maxY - graphingArea.height * (y - graphingWindow.startValue) / (graphingWindow.length)
    }
}

编辑 2:

这是我的代码的简化版本，它显示了问题:

override func drawRect(rect: CGRect) {
    let rect1: CGRect = CGRect(
        x: 0,
        y: 0,
        width: 40,
        height: 33.7
    )
    let rect2: CGRect = CGRect(
        x: 0,
        y: rect1.height,
        width: 40,
        height: 33.5
    )

    let context: CGContextRef = UIGraphicsGetCurrentContext()

    CGContextSetFillColorWithColor(context, UIColor(red: 1 / 255, green: 29 / 255, blue: 29 / 255, alpha: 1).CGColor)
    CGContextAddRect(context, rect1)
    CGContextFillRect(context, rect1)

    CGContextSetFillColorWithColor(context, UIColor(red: 9 / 255, green: 47 / 255, blue: 46 / 255, alpha: 1).CGColor)
    CGContextAddRect(context, rect2)
    CGContextFillRect(context, rect2)
}

它产生这个:

Answer 1

我怀疑在这种特殊情况下，您正在填充的矩形不是完整的，即它们可能具有默认情况下使用稍微透明像素(抗锯齿)渲染的原点/高度。您可以通过适当舍入 Y 轴平移来避免这种情况

private func translateY(y: CGFloat) -> CGFloat {
    if barsAreReversed {
        return round(graphingArea.minY + graphingArea.height * (y - graphingWindow.startValue) / (graphingWindow.length))
    } else {
        return round(graphingArea.maxY - graphingArea.height * (y - graphingWindow.startValue) / (graphingWindow.length))
    }
}

对于弧形和其他形状，这并不容易，但是，您可以通过在形状之间留下一点重叠来尝试摆脱它。当然，正如 matt 所指出的，您可以简单地关闭抗锯齿功能，在这种情况下，这些透明的“半像素”将全部呈现，就好像它们实际上完全位于矩形内一样。