이미지와 텍스트를 단일 이미지로 그립니다.

Question

텍스트를 초기 위치로 유지하면서 이미지와 텍스트 필드를 하나의 이미지로 결합하려고합니다.

비트 맵 컨텍스트를 만들려면 UIGraphicsBeginImageContext을 사용하고 최종 이미지를 그리려면 UIGraphicsGetImageFromCurrentImageContext을 사용하고 있습니다.

지금까지, 나는 함수에 포함 된 다음 한 :

let size = CGSize(width: self.takenImage.size.width, height: self.takenImage.size.height) 
    UIGraphicsBeginImageContextWithOptions(takenImage.size, false, takenImage.scale) 

    let areaSize = CGRect(x: 0, y: 0, width: self.takenImage.size.width, height: self.takenImage.size.height) 
    takenImage.draw(in: areaSize) 

    let imageViewSize = self.takenImage.size 
    let multiWidth = areaSize.width/imageViewSize.width 
    let multiHeight = areaSize.height/imageViewSize.height 
    print ("multiWidth = \(multiWidth)") 
    print ("multiHeight = \(multiHeight)") 

    let textSize = CGRect(x: textOverlay.frame.origin.x * multiWidth, y: textOverlay.frame.origin.y * multiHeight, width: textOverlay.frame.size.width * multiWidth, height: textOverlay.frame.size.height * multiHeight) 
    textOverlay.drawText(in: textSize) 

    let outputImage:UIImage = UIGraphicsGetImageFromCurrentImageContext()! 
    UIGraphicsEndImageContext() 

    self.finalImage = outputImage 

takenImage 내 카메라 (결코 널)과 textOverlay에서 촬영 한 이미지입니다 원하는 텍스트를 포함하는 UITextField이다.

먼저 비트 맵을 만들고 원래 너비/높이를 사용하여 takenImage을 그립니다.

이걸 내 finalImage에 그려 넣으면 모두 정상적으로 작동합니다. 문제는 텍스트를 추가하고 동일한 위치에 유지하려고 시도하는 데 있습니다.

UITextField : textOverlay에서 x, y, w, h 좌표로 두 번째 CGRect을 만들려고했으나 최종 이미지를 볼 때 이상한 결과가 나타납니다.

이미지는 here으로 볼 수 있습니다.

병합 된 이미지에서 텍스트의 위치를 ​​유지하려면 어떻게해야합니까?

Answer 1

텍스트를 그리려면 영역 크기를 다시 계산해야합니다. 여기

let areaSize = CGRect(x: 0, y: 0, width: self.takenImage.size.width, height: self.takenImage.size.height) 
takenImage.draw(in: areaSize) 

let imageViewSize = self.imageView.size 
let multiWidth = areaSize.width/imageViewSize.width 
let multiHeight = areaSize.height/imageViewSize.height 

let textSize = CGRect(x: textOverlay.frame.origin.x * multiWidth, y: textOverlay.frame.origin.y * multiHeight, width: textOverlay.frame.size.width * multiWidth, height: textOverlay.frame.size.height * multiHeight) 
textOverlay.drawText(in: textSize) 

, 나는 self.imageView을 사용 -이 이미지 뷰가 takenImage 포함되어 있습니다. 도움이 되길 바랍니다.