swift - 在 UITextField 中输入的每个数字周围绘制方框

Question

我试图在 UITextField 中用户输入的每个数字周围绘制方框，其键盘类型为 - 数字键盘。

为了简化问题陈述，我假设每个数字(0 到 9)的字形都有相同的边界框，这是我使用以下代码获得的:

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, &glyphs, unichars.count)
        if gotGlyphs {
            let cgpath = CTFontCreatePathForGlyph(font, glyphs[0], nil)!
            let path = UIBezierPath(cgPath: cgpath)
            return path.cgPath.boundingBoxOfPath
        }
        return nil
    }

我正在使用以下代码绘制由此获得的每个边界框:

func configure() {
        guard let boundingRect = getGlyphBoundingRect() else {
            return
        }
        for i in 0..<length { // length denotes number of allowed digits in 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)
        }
    }

现在的问题是 -

如果我在文本字段中输入数字 - 8,8,8，则对于第一次出现的数字，绘制的边界框是对齐的，但是对于第二次出现的相同数字，边界框出现一点偏移(负 x) ，对于后续出现的相同数字，偏移值(负 x)会增加。

这是供引用的图片 -

我尝试通过将 NSAttributedString.Key.kern 设置为 0 来解决问题，但它并没有改变行为。

我是否在计算中遗漏了 X 轴上的任何重要属性，导致我无法在每个数字上正确对齐边界框？请建议。

Answer 1

您需要使用的关键函数是:

protocol UITextInput {
   public func firstRect(for range: UITextRange) -> CGRect
}

这是函数的解决方案:

extension UITextField {
   func characterRects() -> [CGRect] {
      var beginningOfRange = beginningOfDocument

      var characterRects = [CGRect]()

      while beginningOfRange != endOfDocument {
         guard let endOfRange = position(from: beginningOfRange, offset: 1), let textRange = textRange(from: beginningOfRange, to: endOfRange) else { break }

         beginningOfRange = endOfRange

         var characterRect = firstRect(for: textRange)

         characterRect = convert(characterRect, from: textInputView)

         characterRects.append(characterRect)
      }

      return characterRects
   }
}

请注意，如果文本对于文本字段来说太长，您可能需要裁剪矩形。以下是没有裁剪的解决方案示例: