How to scale CGPoints and rescale back in UIView - ios

Question

My app represent a small ReportReview I have a custom CanvasView (UIView) where the user can draw inside.
When the user will finish the draw will be able to will click the Add UIButton and that scribbles will be appended to an object. Each object represent a row in a table.
When the user click any of the rows the colour of the scribbles will be changed on CanvasView to be more visible for user.
When the user finish all the draws can click Save UIButton to serialise and save the report as Data in CoreData.
The user can review the report deserialising it back.
The problem is that the scribbles are not scaled correctly (I think) and the CGPoints on CanvasView are in different locations.
Here is a link with my small project:
https://github.com/tygruletz/SelectScribblesUsingBinaryData
When I serialise I'm using this function:
func serializeDamageItemsTTable(damageItems: [DamageItem], canvas: CanvasView) -> TTable {
var metaDamage: [TMeta] = []
metaDamage.append(TMeta(type: .s, name: "descript")) // DamageItem Name
metaDamage.append(TMeta(type: .z, name: "scribble")) // Coordinates for each scribble recorded on the image for DamageItem
let ttDamageItems = TTable(meta: metaDamage)
print("SERIALIZATION STARTED")
damageItems.forEach { damageItem in
let row = TRow(tMeta: metaDamage)
row.cell.append(TCell(s: damageItem.name)) // DamageItem Name
var scribbleCoord = [UInt8]()
damageItem.scribbles.forEach { scribble in
var firstPointInScribble = true
scribble.forEach { coordinate in
// ------ Scale all CGPoints ---------
let factor: CGFloat = 240 / canvas.bounds.width
let scaledX = UInt8(coordinate.x * factor)
let scaledY = UInt8(coordinate.y * factor)
if (coordinate.x > 0 && coordinate.x < 255) && (coordinate.y > 0 && coordinate.y < 127) {
scribbleCoord.append(scaledX) // Append X coord
if firstPointInScribble {
firstPointInScribble = false
scribbleCoord.append(scaledY | Scribble.yMarkerBitmask) // Append value 1 in front of Y coord + Y coord
} else {
scribbleCoord.append(scaledY)
}
}
}
}
row.cell.append(TCell(data: scribbleCoord)) // Coordinates for each scribble recorded on the image for DamageItem
print("Damage Item Scribble: \(scribbleCoord)")
print("SERIALIZATION ENDED")
do{
try ttDamageItems.add(row: row)
} catch{
print("serializeDamageTTable: Row can't be added: \(error)")
}
}
return ttDamageItems
}
When I deserialise I'm using this:
// Resize back all CGPoints
func scaleAllCGPoints(damageItems: [DamageItem], canvas: CanvasView) -> [[CGPoint]] {
return damageItems.flatMap { damageItem in
damageItem.scribbles.map { scribble in
scribble.map { point in
let factor: CGFloat = 240 / canvas.bounds.width
let scaledX = point.x / factor
let scaledY = point.y / factor
return CGPoint(x: scaledX, y: scaledY)
}
}
}
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
switch indexPath.section {
// Cell with the image recorded + scribbles on the image
case 0:
let cell = tableView.dequeueReusableCell(withIdentifier: "reviewCanvasCell", for: indexPath) as! ReviewCanvasCell
// ------ Resize back all CGPoints ---------
let scribbleCGPoints = scaleAllCGPoints(damageItems: reviewDamageItems, canvas: cell.reviewCanvas)
cell.reviewCanvas.currentScribble = scribbleCGPoints
// ------ Unscaled version ---------
cell.reviewImageView.image = UIImage(data: report.imageRecorded ?? Data()) // Load Image recorded from CoreData
cell.reviewCanvas.damageItems = reviewDamageItems // Load Scribbles on the image from CoreData
cell.selectedDamageIndex = tableView.indexPathForSelectedRow?.row
return cell
default: return UITableViewCell()
}
}
Thanks for reading this !

Answer 1

Couple needed changes...
Prevent out-of-bounds coordinates. As the user drags to draw a line, if the coordinates go outside the bounds of the "canvas" view, change the x/y to minimum of 0 (zero), and max of bounds.maxX / bounds.maxY
Change the canvas view height to the resulting height of the imageView's Aspect-Fit ratio (in your specific case, the images will always be in 240:127 ratio).