I am creating a Bible app with SwiftUI using Text in the background and a PKCanvasView in the front to mark the text and take notes. The user can modify the font and its size and you can navigate to different books and chapters. Each chapter's text has a different size causing the PKCanvasView to have varying sizes. The width of the canvas is always the same but the height changes based on these parameters I just mentioned. If the chapter is long and the height of the canvas exceeds 4000 or some settings cause the text to make the views bound to go beyond 4000, the drawing will enlarge or appear to be occurring in a different location than my pencil. As soon as I lift my pencil, the drawing snaps to the place it belongs.
var body: some View {
HStack(spacing: 0) {
// Main content container
ScrollView {
ZStack {
// Text content
VStack {
if let chapter = viewModel.currentChapterText {
HStack {
Text(AttributedString(chapter.html(fontName: fontName, fontSize: fontSize, showVerses: showVerse, showFootnotes: showFootnotes)))
.padding()
.frame(width: textWidth, alignment: .leading)
Color.clear
}
.frame(width: canvasWidth)
} else {
Text("Select a book to begin reading")
.foregroundColor(.gray)
}
}
// Drawing canvas overlay
if showingDrawingTools {
DrawingCanvasView(
canvasView: $canvasView,
toolPicker: toolPicker,
frame: CGSize(width: deviceWidth, height: deviceHeight),
onSave: saveDrawing
)
}
}
}
}
.onChange(of: viewModel.currentChapter) { oldValue, newValue in
print("BibleContentView - chapter text changed")
}
}