swiftui - 在 SwiftUI 中将多行文本包装在形状内
问题描述
正如标题所述,我正在寻找一种在 SwiftUI 中将多行文本包装在形状内的方法(见下图)。我尝试使用 .clipToShape(MyShape()),但这只会使不在形状内的任何文本不可见。
我过去使用 UIKit 和排除路径完成了这一点,但想找到一种方法来实现与 SwiftUI 相同的效果。
任何建议将不胜感激。
解决方案
我找到了一种数字方法,但它可能不是最好的方法。
它应该适用于 IOS 和 macOS。我在 macOS 上使用 swiftUI 对其进行了测试。
我们要做的第一件事是找出有多少具有字体大小高度的矩形适合其直径的圆。然后我们计算出它们的宽度。最后一步是为每个矩形获取适合的字符数量并将它们添加到数组中。通过将孔数组转换回字符串,我们在每个矩形后添加一个“\n”以获得正确的多行对齐。
func createCircularText(text: String, verticalSpacing: Double, circleDiameter: Double, FontSize: Double) -> String {
var Text = text
var circularText = String()
var CountOfWordLines = Int()
var widthOfWordLine = [Int]()
var widthOfWordLineSorted = [Int]()
var array = [String]()
let heigthOfWordLines = FontSize + verticalSpacing
var Dnum = (((1/heigthOfWordLines) * circleDiameter) - 2.0)
Dnum.round(.up)
CountOfWordLines = Int(Dnum)
for n in 1...(CountOfWordLines / 2) {
let num0 = circleDiameter / 2.0
let num1 = pow(num0, 2.0)
let num2 = (Double(n) * heigthOfWordLines)
let num3 = pow(num2,2.0)
let num4 = num1 - num3
let num5 = sqrt(Double(num4))
let num = Int((num5 / 10) * 3)
widthOfWordLine.append(Int(num))
}
widthOfWordLineSorted.append(contentsOf: widthOfWordLine.sorted { $1 > $0 })
widthOfWordLine.removeFirst()
widthOfWordLineSorted.append(contentsOf: widthOfWordLine)
widthOfWordLine.removeAll()
for n in widthOfWordLineSorted {
array.append(String(Text.prefix(n)))
if Text.isEmpty {} else {
let t = Text.dropFirst(n)
Text = String(t)
}
}
circularText = array.joined(separator: "\n")
return circularText
}
在我们看来,我们嵌入了这样的函数:
@State var text = "your text"
@State var CircularText = String()
// body:
ZStack {
Circle().frame(width: 200)
Text(CircularText)
.multilineTextAlignment(.center)
}
.onAppear(perform: {
CircularText = createCircularText(text: text, verticalSpacing: 3.0, circleDiameter: 200, FontSize: 12)
})
我刚刚用 12 号字体对其进行了测试,但它应该与任何其他字体一起执行也很好。
通过更改直径,您会注意到文本变得有点椭圆,要解决此问题,请更改verticalSpacing。数字越小,圆圈越大,反之亦然。但请随时解决该问题。
另外,请确保您的文本足够长。
推荐阅读
- java - 多个复选框值到弹簧控制器
- ios - 如何将 addTarget 与标签、imageview 或 uiview 一起使用?
- python - Python if 条件简化
- google-apps-script - 如何从插件中获取谷歌应用脚本中活动页面的 DOM 元素
- google-cloud-platform - 如何在 GCE 实例上清理与 SSH 元数据关联的用户?
- git - 使用 git bash 时权限被拒绝
- amazon-web-services - 当两个 DynamoDB 表都具有按需容量时,如何使用 Data Pipeline 将数据复制到另一个 DynamoDB 表
- javascript - 三元运算符如何比较 JavaScript 中的字符和数字?
- php - 由于“字符串”导致错误的字段 INTO OUTFILE mysql
- r - R 中的 For 循环 - 需要帮助