Swift绘图时线条褪色异常：子视图下该问题的成因排查

嘿，这个场景我之前做类似绘图功能时也碰到过——主视图正常，一放到子视图里就出问题，大概率是坐标系、上下文处理或者布局的锅，给你几个具体的排查和解决思路：

• 先搞定坐标系转换
  当游戏板是子视图时，touchesMoved里拿到的触摸点是相对于父视图的，如果你直接用这个点去绘制，肯定会偏移！你得把触摸点转成子视图的本地坐标：

  // 假设你的游戏板子视图叫gameBoardView
  let localTouchPoint = touch.location(in: gameBoardView)
  

  之前如果用的是touch.location(in: self)（父视图坐标），就会导致绘制点和触摸点错位，尤其是子视图不在父视图原点的时候。

• 检查UIImageView的绘制逻辑
  你是在UIImageView上叠加绘图，要是每次绘制都没保留之前的内容，就会出现褪色（本质是旧内容没被正确复用）或者内容丢失。正确的流程应该是：

  1. 基于当前UIImageView的尺寸创建图形上下文
  2. 先把旧图像画进上下文，保留之前的绘制内容
  3. 再绘制新的线条
  4. 把上下文内容赋值回UIImageView
     示例代码大概是这样：

  func drawLine(from start: CGPoint, to end: CGPoint) {
      // 用子视图的尺寸和屏幕scale创建上下文，避免模糊
      UIGraphicsBeginImageContextWithOptions(gameBoardImageView.bounds.size, false, UIScreen.main.scale)
      // 先绘制旧图像，保留之前的内容
      gameBoardImageView.image?.draw(in: gameBoardImageView.bounds)
      // 绘制新线条
      let path = UIBezierPath()
      path.move(to: start)
      path.addLine(to: end)
      path.lineWidth = 2.0
      UIColor.black.setStroke()
      path.stroke()
      // 更新图像
      gameBoardImageView.image = UIGraphicsGetImageFromCurrentImageContext()
      UIGraphicsEndImageContext()
  }
  

  要是你之前没做“绘制旧图像”这一步，每次都是新画，就会导致之前的内容被覆盖，或者因为上下文默认的透明度设置出现褪色效果。

• 排查子视图的布局约束
  检查游戏板子视图的Auto Layout约束或者Autoresizing Mask是不是有问题——如果绘制过程中父视图布局变化，导致子视图的frame/bounds偷偷改变，绘制的内容自然会偏移。可以试试：

  • 把游戏板子视图的translatesAutoresizingMaskIntoConstraints设为false
  • 给它添加固定的约束（比如和父视图四边对齐，或者固定宽高），避免布局变化影响绘制区域

• 检查图层渲染属性
  有时候子视图的图层属性也会搞事情：

  • 确保游戏板子视图和UIImageView的contentsScale都设为UIScreen.main.scale，避免绘制内容模糊或偏移
  • 检查clipsToBounds是否开启，如果子视图内容超出边界，会被裁剪，看起来像偏移

如果能补充完整的draw函数代码，还能更精准定位问题，但目前按上面的方向排查，应该能解决你碰到的偏移和褪色问题。

内容的提问来源于stack exchange，提问作者Jared