Question

标签有四种不同的verticalAlignmentMode：.Baseline，.Bottom，.Center和.Top。

我希望标签根据其基线以其位置为中心。 .Center对我不起作用，因为框架的底部不是文本的基线，而是最低字母的底部（例如，像'y'）。

我还尝试使用.Baseline并从y位置减去一半帧的高度，但这也不起作用，导致与.Center相同的问题。

我试图居中的标签中的文字是“Play！”。将模式设置为“.Center”会使文本略高于我想要的文本，这是非常明显的。将文字更改为“Pla！”解决了这个问题，因为'y'被移除了，并且没有任何字符挂在基线下面（尽管如此，我显然无法做到这一点）。

我想提出解决这个问题的方法 - 或许有一些方法可以获得基线的位置？谢谢！

Answer 1

所以我遇到了同样的问题，在this question and answer的帮助下，我找到了一个不错的解决方案。

我想将标签节点的文本与自定义按钮节点（包装在形状节点中以绘制轮廓的标签节点）对齐。

我还想使切换（打开/关闭）按钮与标签节点的基线对齐，并使用与标签中文本的xHeight相同的高度。

红线表示所有标签和按钮都正确对齐。

因此，为了做到这一点，我做了以下工作。

我创建了一个Font类，该类可用于根据fontName中的fontSize和SKLabelNode创建字体对象。

在内部，它将创建NSFont（macOS）或UIFont（iOS）。并设置上升，下降属性。为了方便起见，还有一个吸气剂，它返回字体的最大可能高度。

import Foundation

#if os(macOS)
import Cocoa
#endif

#if os(iOS)
import UIKit
#endif

enum FontError: LocalizedError {
    case invalidFont(String, CGFloat)

    var errorDescription: String? {
        switch self {
        case .invalidFont(let name, let size):
            return "Could not create font with name \(name) and size: \(size)"
        }
    }
}

class Font {
    private(set) var name: String
    private(set) var size: CGFloat

    private(set) var ascender: CGFloat
    private(set) var descender: CGFloat
    private(set) var xHeight: CGFloat

    var maxHeight: CGFloat {
        return self.ascender + fabs(self.descender)
    }

    init(name: String, size: CGFloat) throws {
        // check if font can be created, otherwise crash
        // set ascender, descender, etc...
        #if os(macOS)
        guard let font = NSFont(name: name, size: size) else {
            throw FontError.invalidFont(name, size)
        }

        self.ascender = font.ascender
        self.descender = font.descender
        self.xHeight = font.xHeight
        #endif

        #if os(iOS)
        guard let font = UIFont(name: name, size: size) else {
            throw FontError.invalidFont(name, size)
        }
        self.ascender = font.ascender
        self.descender = font.descender
        self.xHeight = font.xHeight
        #endif

        self.name = name
        self.size = size
    }
}

然后我在标签位置计算中使用maxHeight。例如，在我的自定义ButtonNode（包含SKShapeNode的{{1}}）中，我执行以下操作（简化）：

SKLabelNode

PS：：如果您不想创建一个单独的// in the constructor of my custom // button node ... let height = 30 self.label = SKLabelNode(text: "Back") // in order to position properly, set // vertical alignment to baseline self.label.verticalAlignmentMode = .baseline let font = try Font(name: self.label.fontName!, size: self.label.fontSize) // depending on the font you might want to add // an additional y offset to place labels // higher or lower within the node let yOffset = (height - font.maxHeight) / 2) let labelWidth = self.label.calculateAccumulatedFrame().width let labelFrame = CGRect( x: 0, y: 0, width: labelWidth, height: height ) self.path = CGPath(roundedRect: labelFrame, cornerWidth: 5, cornerHeight: 5, transform: nil) self.label.position = CGPoint(x: labelFrame.width / 2, y: yOffset)类，但仍希望代码在iOS和macOS上正常工作，则可以为Font和NSFont。由于可以使用相同的构造函数，因此只需添加扩展名即可计算字体的最大高度（UIFont。

我更喜欢创建一个类，因此如果无法正确创建字体，我会抛出错误。

SpriteKit：有没有办法根据其基线将SKLabelNode居中

1 个答案: