Как я могу гарантировать, что буквы будут располагаться вертикально вдоль нарисованного пользователем пути? ⇐ IOS

[Anonymous]

Я работаю над представлением Swiftui, где пользователь может нарисовать пользовательский путь, и я хочу разместить буквы строки вдоль этого пути. Буквы должны быть выровнены перпендикулярно по пути, гарантируя, что текст, по -видимому, стоит прямо вдоль нарисованной поверхности (независимо от того, является ли путь прямой, наклонен или соблазнительный). Тем не менее, угол букв иногда не такой, как ожидалось, особенно когда путь наклонен или изогнут.

Код: Выделить всё

import SwiftUI

struct DraggingLettersView: View {
@State private var letters: [DraggedLetter] = []
@State private var currentIndex = 0
@State private var dragPath: [CGPoint] = []

private let longString = "Let me know if you face any further issues! 😊"
private let letterSpacing: CGFloat = 15

var body: some View {
GeometryReader { geometry in
ZStack {
// Draw the drag path
Path { path in
for (index, point) in dragPath.enumerated() {
if index == 0 {
path.move(to: point)
} else {
path.addLine(to: point)
}
}
}
.stroke(Color.blue, lineWidth: 2)

// Place letters along the path
ForEach(letters) { letter in
Text(String(letter.character))
.font(.system(size: 24, weight: .bold))
.foregroundColor(.white)
.rotationEffect(.degrees(letter.angle))
.position(letter.position)
}

// Clear Button
Button(action: {
letters.removeAll()
currentIndex = 0
dragPath.removeAll()
}, label: {
Text("Clear")
.frame(width: geometry.size.width * 0.2 , height: geometry.size.height * 0.05)
.background(Color.white)
.cornerRadius(10)
.shadow(radius: 5)
})
.position(x: geometry.size.width - 60, y: 80)
}
.frame(width: geometry.size.width, height: geometry.size.height)
.background(Color.gray)
.gesture(
DragGesture(minimumDistance: 0)
.onChanged { value in
handleDrag(value.location)
}
.onEnded { value in
placeTextAlongPath()
}
)
}
.background(Color.white)
.edgesIgnoringSafeArea(.all)
}

// MARK: - Handle Drag
private func handleDrag(_ position: CGPoint) {
dragPath.append(position)
}

// MARK: - Place Text Along Path
private func placeTextAlongPath() {
letters.removeAll()

let pathLength = calculatePathLength()

let numberOfLetters = Int(pathLength / letterSpacing)

for i in 0.. CGFloat {
var length: CGFloat = 0

for i in 1.. CGPoint {
guard dragPath.count >  1 else { return dragPath.first ?? .zero }

let pathLength = calculatePathLength()
let segmentLength = CGFloat(index) * letterSpacing

var accumulatedLength: CGFloat = 0
for i in 1..= segmentLength {
let ratio = (segmentLength - (accumulatedLength - segmentDist)) / segmentDist
let x = start.x + ratio * (end.x - start.x)
let y = start.y + ratio * (end.y - start.y)
return CGPoint(x: x, y: y)
}
}

return dragPath.last ?? .zero
}

// MARK: - Calculate Perpendicular Angle (Angle based on drag direction)
private func calculatePerpendicularAngle(from index: Int) -> Double {
guard dragPath.count > 1 else { return 0 }

guard dragPath.count > index else { return 0 }

let start = dragPath[index]
let end = dragPath[index + 1 < dragPath.count ? index + 1 : index]

let dx = end.x - start.x
let dy = end.y - start.y

let perpDx = -dy
let perpDy = dx

let angle = atan2(perpDy, perpDx) * 180 / .pi

return angle - 90.0
}
}

// MARK: - Dragged Letter Model
struct DraggedLetter: Identifiable {
let id = UUID()
let character: Character
let position: CGPoint
let angle: Double
}

Проблема:
Текст размещен вдоль пути правильно, но угол текста не соответствует поверхности пути , особенно на наклонных или изогнутых дорожках.
Буквы должны стоять «на поверхности» дорожки, независимо от ее направления. Текст всегда должен быть ориентирован в «нормальном» или «перпендикулярном» направлении пути в каждой точке.
Что я пробовал:
Я рассчитайте угол на основе направления пути между двумя точками и используйте вектор перпендикуляра, чтобы установить угол для каждой буквы.
Буквы вращаются в большинстве случаев, но на определенных уклонах или кривых текст по-прежнему не вращается. выровнять, как ожидалось.
Что Мне нужно:
Помощь в обеспечении того, чтобы буквы всегда были перпендикулярны траектории в каждой точке, особенно на наклонных или изогнутых траекториях.
Способ обеспечения того, чтобы буквы всегда выглядели правильно. стоять вертикально, независимо от формы или наклона нарисованного пути.
то, что я хочу, вы можете увидеть на этом изображении. Я хочу, чтобы текст оставался прикрепленным к поверхности пути< /p>


на ровной поверхности это немного нормально, но на наклонной или круговой траектории это неправильно



Подробнее здесь: https://stackoverflow.com/questions/793 ... drawn-path