9

iOS で図形の中央にテキストを描画しようとしています。例としては、Microsoft Office の挿入図形があります。 .png

形状を形成するために使用される座標の配列があり、実際の形状を作成するのにうまく機能します。

私の最初の戦術は、このスタックオーバーフローの質問に従うことでした: iOS の非対称形状のコアテキストですが、形状の下部にテキストを描画することしかできません。テキストを垂直方向と水平方向の中央に配置する方法はありますか?

次に、新しい TextKit を調べましたが、内部に描画するテキスト コンテナーを作成するために座標のNSTextContainera または配列を受け入れるようにサブクラス化する方法に行き詰まりました。CGPath

私のバックアップ ソリューションは、Core Text を使用して図形の中心座標にテキストを描画することですが、これにより、直角三角形などの一部の図形でテキストが図形の外側に描画されます。

または、図形の中心にテキストを配置するために使用できる他の方法はありますか?

4

4 に答える 4

18

私はこれらの回答と関連する質問から厳選しました-本当に満足できるものはありませんでした-そして、この簡単な解決策を思いつきました:

    UIGraphicsBeginImageContext(CGSize.init(width: imageWidth, height: imageHeight))

    let string = "ABC" as NSString

    let attributes = [
            NSFontAttributeName : UIFont.systemFontOfSize(40),
            NSForegroundColorAttributeName : UIColor.redColor()
        ]

    // Get the width and height that the text will occupy.
    let stringSize = string.sizeWithAttributes(attributes)

    // Center a rect inside of the image
    // by going half the difference to the right and down.
    string.drawInRect(
        CGRectMake(
            (imageWidth - stringSize.width) / 2,
            (imageHeight - stringSize.height) / 2,
            stringSize.width,
            stringSize.height
        ),
        withAttributes: attributes
    )

    let newImage = UIGraphicsGetImageFromCurrentImageContext()

    UIGraphicsEndImageContext()

結果（色は気にしないでください）：

文字列 ABC を画像の中央に配置

于 2016-02-23T09:54:27.150 に答える
7

Luca Davanzoの回答のSwift 3バージョン

struct UIUtility {

static func imageWithColor(color: UIColor, circular: Bool) -> UIImage? {
    let size: CGFloat = circular ? 100 : 1;
    let rect = CGRect(x: 0.0, y: 0.0, width: size, height: size)
    UIGraphicsBeginImageContext(rect.size)
    if let context = UIGraphicsGetCurrentContext() {
        context.setFillColor(color.cgColor)
        if(circular) {
            context.fillEllipse(in: rect)
        }
        else {
            context.fill(rect)
        }
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
    return nil
}

static func drawText(text: NSString, font: UIFont, image: UIImage, point: CGPoint, textColor: UIColor = UIColor.white) -> UIImage? {
    UIGraphicsBeginImageContext(image.size)
    image.draw(in: CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height))
    let rect = CGRect(x: point.x, y: point.y, width: image.size.width, height: image.size.height)
    text.draw(in: rect.integral, withAttributes: [ NSFontAttributeName: font, NSForegroundColorAttributeName: textColor ])
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return newImage
}

static func circleImageWithText(text: String, font: UIFont, circleColor: UIColor, textColor: UIColor = UIColor.white) -> UIImage? {
    if let image = UIUtility.imageWithColor(color: circleColor, circular: true) {
        let textSize = NSString(string: text).size(attributes: [ NSFontAttributeName: font])
        let centerX = ((image.size.width) / 2.0) - (textSize.width / 2.0)
        let centerY = ((image.size.height) / 2.0) - (textSize.height / 2.0)
        let middlePoint = CGPoint(x: centerX, y: centerY)
        return UIUtility.drawText(text: text as NSString, font: font, image: image, point: middlePoint, textColor: textColor)
    }
    return nil
}
}
于 2017-03-29T11:10:55.957 に答える
4

それは少しトリッキーです。まず、コンテキストを作成する必要があります。(bounds.size は画像のサイズです)

UIGraphicsBeginImageContext(bounds.size); 
CGContextRef context = UIGraphicsGetCurrentContext();

次に、テキストのバウンディング ボックスを取得します (font は使用するフォントです)。

CGSize textSize =
[yourText sizeWithAttributes:@{NSFontAttributeName:font}];

コンテキストにテキストを描画します (x と y は画像の中心を示します)

[yourText drawAtPoint:CGPointMake(x, y) withAttributes:@{NSFontAttributeName:font}];

画像を取得する

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

終了画像コンテキスト

UIGraphicsEndImageContext();

私はそれをテストしていませんが、それは行く方法です。

于 2014-01-21T14:30:46.097 に答える
4

スイフト2.0対応。

私の目的は、テキストを中央に配置して円を描くことでした。

struct UIUtility {

  static func imageWithColor(color: UIColor, circular : Bool) -> UIImage {
    let size : CGFloat = circular ? 100 : 1;
    let rect = CGRectMake(0.0, 0.0, size, size)
    UIGraphicsBeginImageContext(rect.size)
    let context = UIGraphicsGetCurrentContext()
    CGContextSetFillColorWithColor(context, color.CGColor)
    if(circular) {
        CGContextFillEllipseInRect(context, rect)
    }
    else {
        CGContextFillRect(context, rect)
    }
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
  }

  static func drawText(text: NSString, font: UIFont, image: UIImage, point: CGPoint, textColor: UIColor = UIColor.whiteColor()) -> UIImage {
    UIGraphicsBeginImageContext(image.size)
    image.drawInRect(CGRectMake(0, 0, image.size.width, image.size.height))
    let rect = CGRectMake(point.x, point.y, image.size.width, image.size.height)
    text.drawInRect(CGRectIntegral(rect), withAttributes: [ NSFontAttributeName: font, NSForegroundColorAttributeName : textColor ])
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return newImage
  }

  static func circleImageWithText(text text: String, font: UIFont, circleColor: UIColor, textColor: UIColor = UIColor.whiteColor()) -> UIImage {
    let image = UIUtility.imageWithColor(circleColor, circular: true)
    let textSize = NSString(string: text).sizeWithAttributes([ NSFontAttributeName: font])
    let centerX = (image.size.width / 2.0) - (textSize.width / 2.0)
    let centerY = (image.size.height / 2.0) - (textSize.height / 2.0)
    let middlePoint = CGPointMake(centerX, centerY)
    return UIUtility.drawText(text, font: font, image: image, point: middlePoint)
  }

}

このユーティリティを使用すると、次の方法でイメージを簡単に作成できます。

let font = UIFont()
let image = UIUtility.circleImageWithText(text: "Center text", font: font, circleColor: UIColor.blackColor())
于 2015-10-22T11:27:13.787 に答える