Re: Drawing boxes around each digit entered in UITextField (Number Pad)

2019-02-10 Thread Quincey Morris 
On Feb 9, 2019, at 12:36 , Devarshi Kulshreshtha  
wrote:
> 
> Am I missing any important property in X axis from the calculation due to
> which I am unable to get properly aligned bounding box over each digit?

Yes, you’re Doing It Wrong™. :)

Glyphs are laid out along the line according to their advance widths, not their 
bounding box widths. That means the *width* of the box you draw should be the 
advance width (minus any thickness of the box border that lies outside the box 
rect, minus any spacing you want between the boxes horizontally). The *height* 
of the box should be something big enough to hold the digit (e.g. font ascent + 
font descent). The *origin offset* of the box should be a multiple of the 
advance width.

https://developer.apple.com/documentation/coretext/1511265-ctfontgetadvancesforglyphs
 


This is still going to be problematic sometimes, depending on the font. There’s 
nothing preventing glyphs from being wider than their advance width, and you 
have no control over that. Also, there’s no guarantee that all the digits have 
the same advance width (“lining numerals”), although it’s typically true of 
fonts made for use on computers. You might want to force a monospaced font for 
the text field. Also, be careful with non-Roman fonts: the conventions for 
digits might be different.
___

Cocoa-dev mailing list (Cocoa-dev@lists.apple.com)

Please do not post admin requests or moderator comments to the list.
Contact the moderators at cocoa-dev-admins(at)lists.apple.com

Help/Unsubscribe/Update your Subscription:
https://lists.apple.com/mailman/options/cocoa-dev/archive%40mail-archive.com

This email sent to arch...@mail-archive.com

Re: Drawing boxes around each digit entered in UITextField (Number Pad)

2019-02-09 Thread Devarshi Kulshreshtha 
To be more specific I am trying to implement OTP field as a single text
field. I was trying to plot 6 boxes in a field, so that user can enter one
digit in each box.

On Sunday, February 10, 2019, Gary L. Wade 
wrote:

> Rather than using a UITextField and guessing where things are, look at
> UITextView and its underlying components to know where each character
> actually is and how to coordinate your drawing with the drawing of each
> grapheme.  If you only want to draw the boxes when editing, you could
> instead provide your own field editor that does the same thing, and drawing
> when not editing would follow the non-boxed method.
> --
> Gary L. Wade
> http://www.garywade.com/
>
> On Feb 9, 2019, at 12:36 PM, Devarshi Kulshreshtha <
> devarshi.bluec...@gmail.com> wrote:
>
> I am trying to draw boxes around each digit entered by a user in
> UITextField for which keyboard type is - Number Pad.
>
> To simplify the problem statement I assumed that each of the digits (0 to
> 9) will have same bounding box for its glyph, which I obtained using below
> code:
>
> func getGlyphBoundingRect() -> CGRect? {
>guard let font = font else {
>return nil
>}
>// As of now taking 8 as base digit
>var unichars = [UniChar]("8".utf16)
>var glyphs = [CGGlyph](repeating: 0, count: unichars.count)
>let gotGlyphs = CTFontGetGlyphsForCharacters(font, ,
> , unichars.count)
>if gotGlyphs {
>let cgpath = CTFontCreatePathForGlyph(font, glyphs[0], nil)!
>let path = UIBezierPath(cgPath: cgpath)
>return path.cgPath.boundingBoxOfPath
>}
>return nil
>}
>
> I am drawing each bounding box thus obtained using below code:
>
> func configure() {
>guard let boundingRect = getGlyphBoundingRect() else {
>return
>}
>for i in 0.. the box
>var box = boundingRect
>box.origin.x = (CGFloat(i) * boundingRect.width)
>let shapeLayer = CAShapeLayer()
>shapeLayer.frame = box
>shapeLayer.borderWidth = 1.0
>shapeLayer.borderColor = UIColor.orange.cgColor
>layer.addSublayer(shapeLayer)
>}
>}
>
> Now problem is -  if I am entering digits - 8,8,8 in the text field then
> for first occurrence of digit the bounding box drawn is aligned, however
> for second occurrence of same digit the bounding box appears a bit offset
> (by negative x), the offset value (in negative x) increases for subsequent
> occurrences of same digit.
>
> I tried to solve the problem by setting NSAttributedString.Key.kern to 0,
> however it did not change the behavior.
>
> Am I missing any important property in X axis from the calculation due to
> which I am unable to get properly aligned bounding box over each digit?
> Please suggest.
>
> --
> Thanks,
>
> Devarshi
>
>
>

-- 
Thanks,

Devarshi
___

Cocoa-dev mailing list (Cocoa-dev@lists.apple.com)

Please do not post admin requests or moderator comments to the list.
Contact the moderators at cocoa-dev-admins(at)lists.apple.com

Help/Unsubscribe/Update your Subscription:
https://lists.apple.com/mailman/options/cocoa-dev/archive%40mail-archive.com

This email sent to arch...@mail-archive.com

Re: Drawing boxes around each digit entered in UITextField (Number Pad)

2019-02-09 Thread Gary L. Wade 
Rather than using a UITextField and guessing where things are, look at 
UITextView and its underlying components to know where each character actually 
is and how to coordinate your drawing with the drawing of each grapheme.  If 
you only want to draw the boxes when editing, you could instead provide your 
own field editor that does the same thing, and drawing when not editing would 
follow the non-boxed method.
--
Gary L. Wade
http://www.garywade.com/ 

> On Feb 9, 2019, at 12:36 PM, Devarshi Kulshreshtha 
>  wrote:
> 
> I am trying to draw boxes around each digit entered by a user in
> UITextField for which keyboard type is - Number Pad.
> 
> To simplify the problem statement I assumed that each of the digits (0 to
> 9) will have same bounding box for its glyph, which I obtained using below
> code:
> 
> func getGlyphBoundingRect() -> CGRect? {
>guard let font = font else {
>return nil
>}
>// As of now taking 8 as base digit
>var unichars = [UniChar]("8".utf16)
>var glyphs = [CGGlyph](repeating: 0, count: unichars.count)
>let gotGlyphs = CTFontGetGlyphsForCharacters(font, ,
> , unichars.count)
>if gotGlyphs {
>let cgpath = CTFontCreatePathForGlyph(font, glyphs[0], nil)!
>let path = UIBezierPath(cgPath: cgpath)
>return path.cgPath.boundingBoxOfPath
>}
>return nil
>}
> 
> I am drawing each bounding box thus obtained using below code:
> 
> func configure() {
>guard let boundingRect = getGlyphBoundingRect() else {
>return
>}
>for i in 0.. the box
>var box = boundingRect
>box.origin.x = (CGFloat(i) * boundingRect.width)
>let shapeLayer = CAShapeLayer()
>shapeLayer.frame = box
>shapeLayer.borderWidth = 1.0
>shapeLayer.borderColor = UIColor.orange.cgColor
>layer.addSublayer(shapeLayer)
>}
>}
> 
> Now problem is -  if I am entering digits - 8,8,8 in the text field then
> for first occurrence of digit the bounding box drawn is aligned, however
> for second occurrence of same digit the bounding box appears a bit offset
> (by negative x), the offset value (in negative x) increases for subsequent
> occurrences of same digit.
> 
> I tried to solve the problem by setting NSAttributedString.Key.kern to 0,
> however it did not change the behavior.
> 
> Am I missing any important property in X axis from the calculation due to
> which I am unable to get properly aligned bounding box over each digit?
> Please suggest.
> 
> -- 
> Thanks,
> 
> Devarshi

___

Cocoa-dev mailing list (Cocoa-dev@lists.apple.com)

Please do not post admin requests or moderator comments to the list.
Contact the moderators at cocoa-dev-admins(at)lists.apple.com

Help/Unsubscribe/Update your Subscription:
https://lists.apple.com/mailman/options/cocoa-dev/archive%40mail-archive.com

This email sent to arch...@mail-archive.com

Drawing boxes around each digit entered in UITextField (Number Pad)

2019-02-09 Thread Devarshi Kulshreshtha 
I am trying to draw boxes around each digit entered by a user in
UITextField for which keyboard type is - Number Pad.

To simplify the problem statement I assumed that each of the digits (0 to
9) will have same bounding box for its glyph, which I obtained using below
code:

func getGlyphBoundingRect() -> CGRect? {
guard let font = font else {
return nil
}
// As of now taking 8 as base digit
var unichars = [UniChar]("8".utf16)
var glyphs = [CGGlyph](repeating: 0, count: unichars.count)
let gotGlyphs = CTFontGetGlyphsForCharacters(font, ,
, unichars.count)
if gotGlyphs {
let cgpath = CTFontCreatePathForGlyph(font, glyphs[0], nil)!
let path = UIBezierPath(cgPath: cgpath)
return path.cgPath.boundingBoxOfPath
}
return nil
}

I am drawing each bounding box thus obtained using below code:

func configure() {
guard let boundingRect = getGlyphBoundingRect() else {
return
}
for i in 0..https://lists.apple.com/mailman/options/cocoa-dev/archive%40mail-archive.com

This email sent to arch...@mail-archive.com