1

I'm developing simple kids alphabets drawing app in iOS. I have created bezier path of a letter with dashed line. If kids draw over the bezier path, I have to detect whether they drawing correctly or not. I'm allowing them to draw only over that path. I don't know to detect whether they are drawing correctly or not and whether they completed it correctly.

// Created layer for path

let font = UIFont.systemFont(ofSize: 350)

var unichars = [UniChar](selectedText.utf16)
var glyphs = [CGGlyph](repeating: 0, count: unichars.count)
let gotGlyphs = CTFontGetGlyphsForCharacters(font, &unichars, &glyphs, unichars.count)

if gotGlyphs {
    let cgpath = CTFontCreatePathForGlyph(font, glyphs[0], nil)!
    var inverse = CGAffineTransform(scaleX: 1, y: -1).translatedBy(x: 0, y: -cgpath.boundingBox.height - 1)
    let path = UIBezierPath(cgPath: cgpath.copy(using: &inverse)!)

    shapeLayer.path = path.cgPath
    shapeLayer.fillColor = UIColor.clear.cgColor

    shapeLayer.strokeColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)
    shapeLayer.lineDashPattern = [7,3]

    mainImageView.layer.addSublayer(shapeLayer)
}

//Allowing user to draw only over letter path

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    let touch = touches.first
    guard let point =  touch?.location(in: self.mainImageView) else {
        return
    }
    if let path = shapeLayer.path, path.contains(point) {
        lastPoint = point
    }
}

func drawLineFrom(fromPoint: CGPoint, toPoint: CGPoint) {

    // 1
    UIGraphicsBeginImageContext(drawPadView.frame.size)
    let context = UIGraphicsGetCurrentContext()
    tempImgView.image?.draw(in: CGRect(x: 0, y: 0, width: drawPadView.frame.size.width, height: drawPadView.frame.size.height))

    // 2
    context?.move(to: toPoint)
    context?.addLine(to: toPoint)
    // 3

    context?.setLineCap(.round)
    context?.setLineWidth(brushWidth)
    context?.setStrokeColor(UIColor(displayP3Red:  red, green: green, blue: blue, alpha: 1.0).cgColor)
    context?.setBlendMode(.normal)

    // 4
    context?.strokePath()
    // 5
    tempImgView.image = UIGraphicsGetImageFromCurrentImageContext()
    tempImgView.alpha = opacity
    UIGraphicsEndImageContext()    
}

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    swiped = true
    let touch = touches.first
    guard let point =  touch?.location(in: self.mainImageView) else {
        return
    }
    if let path = shapeLayer.path, path.contains(point) {
        drawLineFrom(fromPoint: lastPoint, toPoint: point)
        lastPoint = point
    }
}

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    if !swiped {
        drawLineFrom(fromPoint: lastPoint, toPoint: lastPoint)
    }

    // Merge tempImageView into mainImageView
    UIGraphicsBeginImageContext(drawPadView.frame.size)
    mainImageView.image?.draw(in: CGRect(x: 0, y: 0, width: drawPadView.frame.size.width, height: drawPadView.frame.size.height), blendMode: .normal, alpha: opacity)
    tempImgView.image?.draw(in: CGRect(x: 0, y: 0, width: drawPadView.frame.size.width, height: drawPadView.frame.size.height), blendMode: .normal, alpha: opacity)
    mainImageView.image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
}

Please suggest me how to verify user completed drawing and check whether they drawn correctly or not.

Andy
  • 723
  • 9
  • 24
Dharani
  • 63
  • 8

0 Answers0