iOS : UIImage created by UIBezierPath not smooth

Question

I get the point from touch screen , and scale the point ,then I put the point to the UIBezierPath,

this is my code

let bezierPath = UIBezierPath()

for var i:Int = 0 ; i < newPoints.count ; i++ {
   var indexCount = 0
   let point = newPoints[i][j]
   if point.count > 0{
      let newPointX = point[0] - originRectX // reset the point start with CGPointZero
      let newPointY = point[1] - originRectY
      let scalePointX = newPointX * heightScale  //scale the point with heightScale 0.25
      let scalePointY = newPointY * heightScale
      let scalePoint = CGPointMake(scalePointX, scalePointY)
      if indexCount == 0 {
         bezierPath.moveToPoint(scalePoint)
      }else{
         bezierPath.addLineToPoint(scalePoint)
      }
      indexCount++
   }
}

then I convert the path to UIImage

var tempImage = UIImage()
UIGraphicsBeginImageContextWithOptions(size, false, 1)
stokeColor.setStroke()
bezierPath.lineWidth = lineWidth
bezierPath.lineCapStyle = CGLineCap.Round
bezierPath.lineJoinStyle = CGLineJoin.Round
bezierPath.stroke()
tempImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

then I draw the UIImage in screen

 let context = UIGraphicsGetCurrentContext();
 CGContextSaveGState(context)
 let rect = CGRect(x: drawObj.points![0].x,y: drawObj.points![0].y,width: drawObj.image.size.width,height: drawObj.image.size.height)
 drawObj.image?.drawInRect(rect)
 CGContextRotateCTM(context,CGFloat(Double(drawObj.angle!)*M_PI/180))
 CGContextRestoreGState(context)

this is effect

You can find it is not smooth

While Kurt answered the question about pixelation, you may also find a separate issue that `addLineToPoint` can eventually lead to the path appearing as a series of line segments rather than smooth curves. At the very least, in iOS 9 you can use coalesced and predictive points to improve the number of points captured on high end devices. Furthermore, you can apply smoothing algorithms, shown here: http://stackoverflow.com/questions/34579957/drawing-class-drawing-straight-lines-instead-of-curved-lines/34583708#34583708. — Rob, Jan 17 '16 at 08:15

score 2 · Accepted Answer · answered Jan 17 '16 at 07:53

Read the documentation for the functions you are calling.

UIGraphicsBeginImageContextWithOptions(size, false, 1)

The 3rd argument is scale. You are passing in 1, which is the scale for a 1x display like an original iPhone. In 2016 you are almost certainly using a device whose main screen is 2x or 3x. The easiest fix is to change the argument to 0, which will automatically use the scale of the main screen:

UIGraphicsBeginImageContextWithOptions(size, false, 0)

Also, while we're here, this line does effectively nothing:

CGContextRotateCTM(context,CGFloat(Double(drawObj.angle!)*M_PI/180))

If you want it to apply to the drawing of the image, you need to call it first, before you call drawObj.image?.drawInRect(rect).

iOS : UIImage created by UIBezierPath not smooth

1 Answers1