I want to add a text on an image, and I'm able to do it as shown in below code.
func textToImage(drawText: NSString, inImage: UIImage, atPoint:CGPoint)->UIImage{
// Setup the font specific variables
var textColor: UIColor = UIColor.redColor()
var textFont: UIFont = UIFont(name: "AmericanTypewriter", size: 75)!
let textStyle = NSTextEffectLetterpressStyle
//Setup the image context using the passed image.
UIGraphicsBeginImageContext(inImage.size)
let textFontAttributes = [
NSFontAttributeName: textFont,
NSForegroundColorAttributeName: textColor,
NSTextEffectAttributeName : textStyle
]
inImage.drawInRect(CGRectMake(0, 0, inImage.size.width, inImage.size.height))
var rect: CGRect = CGRectMake(atPoint.x, atPoint.y, inImage.size.width, inImage.size.height)
drawText.drawInRect(rect, withAttributes: textFontAttributes)
var newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage
}
I called this function like shown below
let newImage : UIImage = textToImage(textToAdd!, inImage: imageToSave, atPoint:CGPoint(x: 20, y: 20)) //For now text is displaying at the top in left end for point(x:20 ,y:20)
But the problem is, text is taken by user. They can give either single word or big sentence. So if they give only single word, it should appear in top and middle of the image or else in top from left to right. it is more like, I want to set the text alignment to centre. To achieve it, Accordingly I should change the CGPoint given above. But I'm not getting how to change it so that it should look good in all scenarios. Please help me how to achieve this.
You can center the text near the top of the image like this:
func textToImage(drawText: NSString, inImage: UIImage, atPoint:CGPoint)->UIImage{
// Setup the font specific variables
var textColor: UIColor = UIColor.redColor()
var textFont: UIFont = UIFont(name: "AmericanTypewriter", size: 75)!
let textStyle = NSTextEffectLetterpressStyle
//Setup the image context using the passed image.
UIGraphicsBeginImageContext(inImage.size)
let textFontAttributes = [
NSFontAttributeName: textFont,
NSForegroundColorAttributeName: textColor,
NSTextEffectAttributeName : textStyle
]
inImage.drawInRect(CGRectMake(0, 0, inImage.size.width, inImage.size.height))
let textSize = drawText.sizeWithAttributes(textFontAttributes)
let textRect = CGRectMake(inImage.size.width / 2 - textSize.width / 2, 0,
inImage.size.width / 2 + textSize.width / 2, inImage.size.height - textSize.height)
drawText.drawInRect(textRect, withAttributes: textFontAttributes)
var newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage
}
Added to #osteven answer. Below code works as I expected. Hope it helps others.
func textToImage(drawText: NSString, inImage: UIImage, atPoint:CGPoint)->UIImage{
// Setup the font specific variables
var textColor: UIColor = UIColor.redColor()
var textFont: UIFont = UIFont(name: "AmericanTypewriter", size: 75)!
let textStyle = NSTextEffectLetterpressStyle
//Setup the image context using the passed image.
UIGraphicsBeginImageContext(inImage.size)
let textFontAttributes = [
NSFontAttributeName: textFont,
NSForegroundColorAttributeName: textColor,
NSTextEffectAttributeName : textStyle
]
inImage.drawInRect(CGRectMake(0, 0, inImage.size.width, inImage.size.height))
let textSize = drawText.sizeWithAttributes(textFontAttributes)
if textSize.width < inImage.size.width {
println("lesser")
let textRect = CGRectMake(inImage.size.width / 2 - textSize.width / 2, 0,
inImage.size.width / 2 + textSize.width / 2, inImage.size.height - textSize.height)
drawText.drawInRect(textRect, withAttributes: textFontAttributes)
}
else {
println("greater")
let textRect = CGRectMake(0 , 0,
inImage.size.width, inImage.size.height)
drawText.drawInRect(textRect, withAttributes: textFontAttributes)
}
var newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage
It may be a simple as what you suggested with "I want to set the text alignment to centre".
Add a line here:
// Setup the font specific variables
var textColor: UIColor = UIColor.redColor()
var textFont: UIFont = UIFont(name: "AmericanTypewriter", size: 75)!
let textStyle = NSTextEffectLetterpressStyle
let textAlignment = NSTextAlignment.Center
and add to your array:
let textFontAttributes = [
NSFontAttributeName: textFont,
NSForegroundColorAttributeName: textColor,
NSTextEffectAttributeName : textStyle
NSTextAlignment: textAlignment
]
This should make the text centered in the image.
If you change the point of text origin back to (0, 0) and set your Text Rectangle as big as the image, it should be able to account for the width of Rect and thus center all of the text accordingly.
Related
I have a camera which provides me UIImage with resolution of 1920x1080, I have implemented a system where I can add UITextViews as subviews and my goal is to add them to the original UIImage and export a final Image of the resolution of 1920x1080.
So the procedure I have been thinking about is this:
I add upperView over view.frame which is responsible of drawing all the textViews present on screen.
Then I want to add this view over the original UIImage scaling it proportionally
This is the code I implemented in order to do it:
func passingAndDrawingTextViews(textViews : [UITextView], viewPassed : UIView, inImage : UIImage) -> UIImage{
let scale = UIScreen.main.scale
UIGraphicsBeginImageContextWithOptions(viewPassed.frame.size, false, scale)
viewPassed.draw(CGRect(x: 0, y: 0, width: viewPassed.frame.width, height: viewPassed.frame.height))
//adding each textView
textViews.forEach { (textView) in
let textColor = textView.textColor
let textFont = UIFont(name: textView.font!.fontName, size: textView.font!.pointSize)
let textAlignment = textView.textAlignment
//alignment of the text
let paragraphStyle: NSMutableParagraphStyle = NSMutableParagraphStyle()
paragraphStyle.alignment = textAlignment
let textFontAttributes = [
NSAttributedString.Key.font: textFont,
NSAttributedString.Key.foregroundColor: textColor,
NSAttributedString.Key.paragraphStyle : paragraphStyle,
]
let rect = CGRect(x: textView.frame.minX + textView.textContainer.lineFragmentPadding, y: textView.frame.minY + textView.textContainerInset.top, width: textView.frame.width, height: textView.frame.height)
textView.text.draw(in: rect, withAttributes: textFontAttributes as [NSAttributedString.Key : Any])
}
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
UIGraphicsBeginImageContext(inImage.size)
let rect = CGRect(x: 0, y: 0, width: inImage.size.width, height: inImage.size.height)
inImage.draw(in: CGRect(x: 0, y: 0, width: inImage.size.width, height: inImage.size.height))
newImage!.draw(in: rect)
let result = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return result!
}
In the function I respectively pass the list of textViews, the upperView, and the originalImage.
But the problem is that the textView I get are stretched on the x axis. I don't know why this happens.
What I get:
What I want
the rect you are passing in this line :
newImage!.draw(in: rect)
is actually the size of screen it self so the image will strech to fill this rect.
so make this :
let rect = CGRect(x: 0, y: 0, width: inImage.size.width, height: inImage.size.height)
the size of the image you are passing in.
I am trying to build a custom MKOverlayRenderer subclass which will display an image and text presented on top of some type of subview based on this answer. At my current stage of implementing this I have gotten the image to appear on the map but now I am trying to add text over the image.
The text is appearing upside down and flipped on top of the image. The image appears to be oriented correctly using the same rectangle and same context. What am I doing wrong how do I go about implementing this?
This is the code pertaining to drawing the text:
UIGraphicsPushContext(context);
// ...
UIGraphicsPushContext(context);
UIColor.black.setStroke()
context.setLineWidth(1)
context.stroke(rect.insetBy(dx: 0.5, dy: 0.5))
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.alignment = .center
let attributes = [NSAttributedString.Key.paragraphStyle : paragraphStyle,
NSAttributedString.Key.font : UIFont.systemFont(ofSize: 100.0),
NSAttributedString.Key.foregroundColor : UIColor.black]
"\(rect.size)".draw(in: rect, withAttributes: attributes)
UIGraphicsPopContext();
Class in its Entirety
class CustomOverlayView:MKOverlayRenderer{
var overlayImage:UIImage
init(overlay:MKOverlay,image:UIImage){
self.overlayImage = #imageLiteral(resourceName: "DSC00042")
super.init(overlay: overlay)
}
override func draw(_ mapRect: MKMapRect, zoomScale: MKZoomScale, in context: CGContext) {
super.draw(mapRect, zoomScale: zoomScale, in: context)
guard let imageReference = overlayImage.cgImage else { return }
var rect = self.rect(for: overlay.boundingMapRect)
context.scaleBy(x: 1.0, y: -1.0)
context.translateBy(x: 0.0, y: -rect.size.height)
context.draw(imageReference, in: rect)
UIGraphicsPushContext(context);
// ...
UIGraphicsPushContext(context);
UIColor.black.setStroke()
context.setLineWidth(1)
context.stroke(rect.insetBy(dx: 0.5, dy: 0.5))
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.alignment = .center
let attributes = [NSAttributedString.Key.paragraphStyle : paragraphStyle,
NSAttributedString.Key.font : UIFont.systemFont(ofSize: 100.0),
NSAttributedString.Key.foregroundColor : UIColor.black]
"\(rect.size)".draw(in: rect, withAttributes: attributes)
UIGraphicsPopContext();
}
}
i have a function which draw text on image but issue is when i call this function it gives a error "Argument labels '(_:, _:)' do not match any available overloads"
i am new to swift and dont know how to fix
func write_text_on_image(drawtext text:NSString , inimage img : UIImage , atpoint point : CGPoint) -> UIImage {
let textcolor = UIColor.white
let font = UIFont(name: "Helvetica", size: 16)
let scale = UIScreen.main.scale
UIGraphicsBeginImageContextWithOptions(img.size, false, scale)
let font_attributes = [
kCTFontAttributeName : font,
kCTForegroundColorAttributeName : textcolor
]
img.draw(in: CGRect(origin: CGPoint.zero, size: img.size))
let rect = CGRect(origin: point, size: img.size)
text.draw(in: rect, withAttributes: font_attributes as [NSAttributedString.Key : Any])
let newimg = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndPDFContext()
return newimg!
}
i am calling this func as
write_text_on_image(drawtext: "THis is some text", inimage: UIImage(named: "test.png")!, atpoint: CGPoint(20,20))[!
check out screen of function []1
As #vadian said, code completion would help you. This is what I got from duplicating a fragment in Playground:
func write_text_on_image(drawtext text:NSString , inimage img : UIImage , atpoint point : CGPoint) -> UIImage { return UIImage() }
write_text_on_image(drawtext: "NSString", inimage: UIImage(), atpoint: CGPoint(x: 0, y: 0))
Doesn't do anything, but compiles.
CGPoint(x,y) pass perameter as CGPoint(x : value,y ; value)
let paragraph = NSMutableParagraphStyle()
paragraph.alignment = NSTextAlignment.right
paragraph.tailIndent = -3
let shadow = NSShadow()
shadow.shadowBlurRadius = 5
shadow.shadowColor = UIColor.gray
shadow.shadowOffset = CGSize(width: 2, height: -2)
let text = NSMutableAttributedString(string: "MY LABEL", attributes:
[NSShadowAttributeName : shadow,
NSStrokeColorAttributeName : UIColor.black,
NSStrokeWidthAttributeName : -3,
NSForegroundColorAttributeName: UIColor.white,
NSFontAttributeName : UIFont(name: "MyFont", size: 24) as Any,
NSParagraphStyleAttributeName : paragraph])
let node = SKLabelNode()
addChild(node)
node.attributedText = attributedString
It works but there is NO shadow. I can use the same NSMutableAttributedString on well-known ASAttributedLabel and it works nice and there IS a shadow, but i want to use SKLabelNode to achieve better performance on IOS11. ASAttributedLabel may lag on dynamic scenes :(
In my app I would like to use UITableViewRowAction with image instead of title text. I set background image using:
let edit = UITableViewRowAction(style: .Normal, title: "Edit") { action, index in
self.indexPath = indexPath
self.performSegueWithIdentifier("toEdit", sender: self)
}
edit.backgroundColor = UIColor(patternImage: UIImage(named: "edit")!)
However image appears many times.
How can I fix this to have only one image in row?
The problem is that the image used as pattern won't fit the space, It will be repeated in order to fill it.
One option to have a non-repeated image is to
use a UITableViewCell with fixed height
use image that fits that height
I have wrote a subclass of UITableViewRowAction to help you calculating the length of the title and you just pass the size of rowAction and the image.
class CustomRowAction: UITableViewRowAction {
init(size: CGSize, image: UIImage, bgColor: UIColor) {
super.init()
// calculate actual size & set title with spaces
let defaultTextPadding: CGFloat = 15
let defaultAttributes = [ NSFontAttributeName: UIFont.systemFont(ofSize: 18)] // system default rowAction text font
let oneSpaceWidth = NSString(string: " ").size(attributes: defaultAttributes).width
let titleWidth = size.width - defaultTextPadding * 2
let numOfSpace = Int(ceil(titleWidth / oneSpaceWidth))
let placeHolder = String(repeating: " ", count: numOfSpace)
let newWidth = (placeHolder as NSString).size(attributes: defaultAttributes).width + defaultTextPadding * 2
let newSize = CGSize(width: newWidth, height: size.height)
title = placeHolder
// set background with pattern image
UIGraphicsBeginImageContextWithOptions(newSize, false, UIScreen.main.nativeScale)
let context = UIGraphicsGetCurrentContext()!
context.setFillColor(bgColor.cgColor)
context.fill(CGRect(origin: .zero, size: newSize))
let originX = (newWidth - image.size.width) / 2
let originY = (size.height - image.size.height) / 2
image.draw(in: CGRect(x: originX, y: originY, width: image.size.width, height: image.size.height))
let patternImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
backgroundColor = UIColor(patternImage: patternImage)
}
}
You can see my project: CustomSwipeCell for more detail.