Ios 沿弧放置CATEXTLEERS

我正在尝试构建一个自定义控件，该控件可能类似于以下Inkscape实体模型：

我正在用

drawRect（）

做一些事情，但是我需要为一些元素设置动画，所以我决定切换到

CALayer

s的合成。我一直在使用

CGContextRef

函数绘制文本，但对于每个字符，我都切换到

CATextLayer

，似乎无法正确转换它们

我的一般方法是为每个角色创建一个

CATextLayer

。我想我可以使用每个层的

preferredFrameSize（）

来获得角色的最终大小。然后我想我应该在控件的

layoutSubviews（）

方法中调整它们的位置和旋转

“我试过什么了？”我感觉自己就像是坐在旋转椅上，蒙着眼睛，扔飞镖。随便你说，我试过了

我可以通过以下方式确定每个角色的旋转角度：

let baseline = (self.ringBox.width * 3 / 8) // radius out to the baseline arc
let circumference = baseline * Tau
var advance = wordWidth.half.negated // wordWidth was summed from the width of each character earlier
let angle = 0.75.rotations
for each in self.autoCharacters {
    let charSize = each.bounds.size
    advance += charSize.width.half
    let charRotation = (advance / circumference - 0.75).rotations + angle
    ...
}

我注意到

layoutSubviews（）

似乎被调用了两次。为什么？我注意到第二次通过时，

preferredFrameSize（）

似乎更薄了。为什么？是因为我设置了仿射变换，它有累积效应。我最初尝试将层的位置设置为父框的中心，并将边界设置为preferredFrameSize，希望将其居中。然后应用变换。尽管多次尝试，我还是得到了奇怪的位置和奇怪的剪辑

---

因此，我只是在寻找一个简单/直接的配方，它可以将一个

CATextLayer

放置在一个给定半径/角度的视图中心。

最后，我编写了一个单独的应用程序，其中包括以下所有功能：

• 帧原点
• 帧大小
• 边界原点
• 边界大小
• 位置
• 主播点
• 旋转前变换平移
• 变换旋转
• 旋转后变换平移

以及一些显示层的

preferredFrameSize（）

的调试信息。有了它，我可以操纵事物并看到效果，我可以很简单地把它写下来

为给定单词中的每个字符创建一个

CATextLayer

（键入为

[CATextLayer]

）后，我使用以下方法定位单词的字符：

// pass 1 to:
// - baseline each characters rotation
// - size it and center it
// - accumulate the length of the whole word
var wordWidth:CGFloat = 0.0
for letter in word {
    // baseline the transform first, because preferredFrameSize() is affected by any latent rotation in the current transform
    letter.setAffineTransform(CGAffineTransformIdentity)
    // the preferredFrameSize will now be the un rotated size of the single character
    let size = letter.preferredFrameSize()
    // move the letter to the center of the view
    letter.frame = CGRect(origin: center - size.half, size: size)
    // accumulate the length of the word as the length of characters
    wordWidth += size.width
}
let Tau = CGFloat(M_PI * 2)
// the length of the circle we want to be relative to
let circumference = radius * Tau
// back up the "advance" to half of the word width
var advance = wordWidth.half.negated
for letter in word {
    // retrieve the character dimensions
    let charSize = letter.bounds.size
    // advance half of the character, so we're at its center
    advance += charSize.width.half
    // determine the angle to rotate off of the nominal (which is 270 degrees)
    let charRotation = (advance / circumference * Tau - (Tau * 3 / 4)) + angle
    // start with an identity transform now
    var transform = CGAffineTransformIdentity
    // rotate it. this will rotate about the center of the character
    transform = transform.rotated(charRotation)
    // translate outwards to the ring
    transform = transform.translated(CGPoint(x: 0, y: radius.negated))
    // apply the transform
    letter.setAffineTransform(transform)
    // move the advance the other half of this character
    advance += charSize.width.half
}

---

最后，我编写了一个单独的应用程序，其中包含以下所有功能的滑块：

• 帧原点
• 帧大小
• 边界原点
• 边界大小
• 位置
• 主播点
• 旋转前变换平移
• 变换旋转
• 旋转后变换平移

以及一些显示层的

preferredFrameSize（）

的调试信息。有了它，我可以操纵事物并看到效果，我可以很简单地把它写下来

为给定单词中的每个字符创建一个

CATextLayer

（键入为

[CATextLayer]

）后，我使用以下方法定位单词的字符：

// pass 1 to:
// - baseline each characters rotation
// - size it and center it
// - accumulate the length of the whole word
var wordWidth:CGFloat = 0.0
for letter in word {
    // baseline the transform first, because preferredFrameSize() is affected by any latent rotation in the current transform
    letter.setAffineTransform(CGAffineTransformIdentity)
    // the preferredFrameSize will now be the un rotated size of the single character
    let size = letter.preferredFrameSize()
    // move the letter to the center of the view
    letter.frame = CGRect(origin: center - size.half, size: size)
    // accumulate the length of the word as the length of characters
    wordWidth += size.width
}
let Tau = CGFloat(M_PI * 2)
// the length of the circle we want to be relative to
let circumference = radius * Tau
// back up the "advance" to half of the word width
var advance = wordWidth.half.negated
for letter in word {
    // retrieve the character dimensions
    let charSize = letter.bounds.size
    // advance half of the character, so we're at its center
    advance += charSize.width.half
    // determine the angle to rotate off of the nominal (which is 270 degrees)
    let charRotation = (advance / circumference * Tau - (Tau * 3 / 4)) + angle
    // start with an identity transform now
    var transform = CGAffineTransformIdentity
    // rotate it. this will rotate about the center of the character
    transform = transform.rotated(charRotation)
    // translate outwards to the ring
    transform = transform.translated(CGPoint(x: 0, y: radius.negated))
    // apply the transform
    letter.setAffineTransform(transform)
    // move the advance the other half of this character
    advance += charSize.width.half
}

---

我以前也做过类似的UI。文本围绕一个圆，可以是内圆，也可以是外圆，在同一个圆上可以是顺时针和逆时针方向。我在drawRect方法中绘制东西时取得了最大的成功，使用TextKit直接获取字形及其矩形。我记得它只是需要大量的摆弄才能正确。是否基于每个图示符的基线中心进行计算？这对我来说是个绊脚石。我以前也做过类似的UI。文本围绕一个圆，可以是内圆，也可以是外圆，在同一个圆上可以是顺时针和逆时针方向。我在drawRect方法中绘制东西时取得了最大的成功，使用TextKit直接获取字形及其矩形。我记得它只是需要大量的摆弄才能正确。是否基于每个图示符的基线中心进行计算？那是我的一个绊脚石。