Größe ändern einer Sticky Note

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Größe ändern einer Sticky Note

    Hallo zusammen,
    ich probiere mich gerade an einer Notizen App und möchte dort StickyNotes hinzufügen. Die StickyNotes sollen anpassbar sein (Größe ändern und Position verschieben). Die Position zu ändern funktioniert soweit. Allerdings funktioniert die Änderung der Größe gar nicht. Am besten funktioniert noch der Griffpunkt rechts unten, allerdings nur in der Höhe. Die anderen drei Griffpunkte funktionieren gar nicht, oder völlig unkontrolliert. Ich komme nicht weiter, woran das liegt. Kann mir jemand weiterhelfen?

    Quellcode

    1. import SwiftUI
    2. import PencilKit
    3. struct NotesView: View {
    4. @State private var canvasView = PKCanvasView()
    5. @State private var toolPicker = PKToolPicker()
    6. @State private var isToolPickerVisible = false
    7. @State private var stickyNotes: [StickyNoteModel] = [] // Array für die Sticky Notes
    8. @State private var selectedColor: Color = .yellow // Standardfarbe für Sticky Notes
    9. var body: some View {
    10. VStack {
    11. // Werkzeugleiste mit zusätzlichen Optionen
    12. HStack {
    13. Button(action: toggleToolPicker) {
    14. Image(systemName: isToolPickerVisible ? "pencil.circle.fill" : "pencil.circle")
    15. }
    16. Button(action: createStickyNote) {
    17. Image(systemName: "note.text")
    18. }
    19. Button(action: addShape) {
    20. Image(systemName: "square.on.circle")
    21. }
    22. Button(action: addTextField) {
    23. Image(systemName: "textformat")
    24. }
    25. Button(action: addPhoto) {
    26. Image(systemName: "photo")
    27. }
    28. Button(action: undoLastAction) {
    29. Image(systemName: "arrow.uturn.backward")
    30. }
    31. Menu {
    32. // Farbauswahl für Sticky Notes
    33. Button(action: { selectedColor = .yellow }) {
    34. Text("Gelb")
    35. Image(systemName: "circle.fill").foregroundColor(.yellow)
    36. }
    37. Button(action: { selectedColor = .green }) {
    38. Text("Grün")
    39. Image(systemName: "circle.fill").foregroundColor(.green)
    40. }
    41. Button(action: { selectedColor = .blue }) {
    42. Text("Blau")
    43. Image(systemName: "circle.fill").foregroundColor(.blue)
    44. }
    45. Button(action: { selectedColor = .pink }) {
    46. Text("Pink")
    47. Image(systemName: "circle.fill").foregroundColor(.pink)
    48. }
    49. } label: {
    50. Label("Farbe", systemImage: "paintpalette")
    51. }
    52. }
    53. // Zeichenfläche (Canvas) für das Zeichnen
    54. ZStack {
    55. PKCanvasRepresentable(canvasView: $canvasView)
    56. .onAppear {
    57. toolPicker.setVisible(isToolPickerVisible, forFirstResponder: canvasView)
    58. toolPicker.addObserver(canvasView)
    59. canvasView.becomeFirstResponder() // Setze die Canvas als First Responder
    60. }
    61. .onChange(of: isToolPickerVisible) { newValue in
    62. toolPicker.setVisible(newValue, forFirstResponder: canvasView)
    63. if newValue {
    64. canvasView.becomeFirstResponder()
    65. }
    66. }
    67. .gesture(DragGesture(minimumDistance: 0).onChanged { _ in
    68. // Werkzeugleiste aktivieren, wenn der Apple Pencil benutzt wird
    69. if !isToolPickerVisible {
    70. isToolPickerVisible = true
    71. toolPicker.setVisible(true, forFirstResponder: canvasView)
    72. }
    73. })
    74. // Sticky Note-Ansicht auf der Zeichenfläche hinzufügen
    75. ForEach(stickyNotes.indices, id: \.self) { index in
    76. StickyNoteView(
    77. model: $stickyNotes[index] // Binde das Modell
    78. )
    79. }
    80. }
    81. }
    82. }
    83. // Sichtbarkeit des Werkzeugpickers umschalten und das Symbol ändern
    84. func toggleToolPicker() {
    85. isToolPickerVisible.toggle()
    86. toolPicker.setVisible(isToolPickerVisible, forFirstResponder: canvasView)
    87. }
    88. // Sticky Note erstellen und zur Liste hinzufügen
    89. func createStickyNote() {
    90. let newStickyNote = StickyNoteModel(color: selectedColor) // Verwende die ausgewählte Farbe
    91. stickyNotes.append(newStickyNote)
    92. }
    93. func addShape() {
    94. // Funktion, um eine Form hinzuzufügen
    95. }
    96. func addTextField() {
    97. // Funktion, um ein Textfeld hinzuzufügen
    98. }
    99. func addPhoto() {
    100. // Funktion, um ein Foto hinzuzufügen
    101. }
    102. func undoLastAction() {
    103. canvasView.undoManager?.undo()
    104. }
    105. }
    106. // Canvas-Representable zum Verbinden von UIKit's PKCanvasView mit SwiftUI
    107. struct PKCanvasRepresentable: UIViewRepresentable {
    108. @Binding var canvasView: PKCanvasView
    109. // Erstelle eine neue Instanz von PKCanvasView
    110. func makeUIView(context: Context) -> PKCanvasView {
    111. let newCanvasView = PKCanvasView()
    112. newCanvasView.drawingPolicy = .anyInput // Beispielkonfiguration
    113. newCanvasView.tool = canvasView.tool // Tool übernehmen, falls gesetzt
    114. return newCanvasView
    115. }
    116. // Aktualisiere die PKCanvasView-Eigenschaften basierend auf Änderungen
    117. func updateUIView(_ uiView: PKCanvasView, context: Context) {
    118. uiView.tool = canvasView.tool // Setze das aktuelle Tool
    119. // Weitere Einstellungen vornehmen, falls nötig
    120. }
    121. }
    Alles anzeigen
  • Und hier Teil 2

    Quellcode

    1. import SwiftUI
    2. // Model für die Sticky Notes
    3. struct StickyNoteModel {
    4. let id = UUID()
    5. var position: CGSize = .zero
    6. var size: CGSize = CGSize(width: 200, height: 200)
    7. var text: String = ""
    8. var color: Color = .yellow
    9. var isSelected: Bool = false
    10. var isResizing: Bool = false
    11. var lastPosition: CGSize = .zero
    12. var lastSize: CGSize = CGSize(width: 200, height: 200)
    13. }
    14. struct StickyNoteView: View {
    15. @Binding var model: StickyNoteModel // Binde das Datenmodell
    16. var body: some View {
    17. ZStack(alignment: .topLeading) {
    18. // Sticky Note Hintergrund
    19. model.color
    20. .frame(width: model.size.width, height: model.size.height)
    21. .cornerRadius(10)
    22. .overlay(
    23. RoundedRectangle(cornerRadius: 10)
    24. .stroke(model.isSelected ? Color.blue : Color.clear, lineWidth: 3) // Markierungsrahmen, wenn ausgewählt
    25. )
    26. .overlay(
    27. // Resize-Griffe nur anzeigen, wenn die Sticky Note ausgewählt ist
    28. model.isSelected ? resizeHandles : nil, alignment: .bottomTrailing
    29. )
    30. // Textfeld innerhalb der Sticky Note
    31. TextField("Notiz", text: $model.text)
    32. .padding()
    33. .background(Color.clear)
    34. .frame(width: model.size.width - 20, height: model.size.height - 20)
    35. .multilineTextAlignment(.leading)
    36. .disabled(!model.isSelected) // Nur bei Auswahl kann geschrieben werden
    37. }
    38. .offset(x: model.position.width, y: model.position.height) // Position der Sticky Note
    39. .gesture(
    40. DragGesture()
    41. .onChanged { value in
    42. // Sticky Note verschieben, wenn nicht resized wird
    43. if !model.isResizing {
    44. model.position = CGSize(width: model.lastPosition.width + value.translation.width,
    45. height: model.lastPosition.height + value.translation.height)
    46. }
    47. }
    48. .onEnded { _ in
    49. model.lastPosition = model.position
    50. }
    51. )
    52. .onTapGesture {
    53. // Sticky Note auswählen oder abwählen
    54. model.isSelected.toggle()
    55. }
    56. }
    57. // Resize-Griffe an allen Ecken und Seiten
    58. var resizeHandles: some View {
    59. Group {
    60. resizeHandle(position: .bottomRight)
    61. resizeHandle(position: .bottomLeft)
    62. resizeHandle(position: .topRight)
    63. resizeHandle(position: .topLeft)
    64. resizeHandle(position: .left)
    65. resizeHandle(position: .right)
    66. resizeHandle(position: .top)
    67. resizeHandle(position: .bottom)
    68. }
    69. }
    70. // Einzelne Resize-Griffe basierend auf der Position
    71. func resizeHandle(position: ResizePosition) -> some View {
    72. ZStack {
    73. Circle()
    74. .fill(Color.blue) // Blau gefüllte Resize-Griffe
    75. .frame(width: 10, height: 10) // Kleinere Griffe
    76. .gesture(
    77. DragGesture()
    78. .onChanged { value in
    79. // Breite und Höhe anpassen basierend auf der Position des Griffs
    80. switch position {
    81. case .bottomRight:
    82. model.size.width = max(100, model.lastSize.width + value.translation.width)
    83. model.size.height = max(100, model.lastSize.height + value.translation.height)
    84. case .bottomLeft:
    85. model.size.width = max(100, model.lastSize.width - value.translation.width)
    86. model.size.height = max(100, model.lastSize.height + value.translation.height)
    87. model.position.width = model.lastPosition.width + value.translation.width
    88. case .topRight:
    89. model.size.width = max(100, model.lastSize.width + value.translation.width)
    90. model.size.height = max(100, model.lastSize.height - value.translation.height)
    91. model.position.height = model.lastPosition.height + value.translation.height
    92. case .topLeft:
    93. model.size.width = max(100, model.lastSize.width - value.translation.width)
    94. model.size.height = max(100, model.lastSize.height - value.translation.height)
    95. model.position = CGSize(width: model.lastPosition.width + value.translation.width, height: model.lastPosition.height + value.translation.height)
    96. case .left:
    97. model.size.width = max(100, model.lastSize.width - value.translation.width)
    98. model.position.width = model.lastPosition.width + value.translation.width
    99. case .right:
    100. model.size.width = max(100, model.lastSize.width + value.translation.width)
    101. case .top:
    102. model.size.height = max(100, model.lastSize.height - value.translation.height)
    103. model.position.height = model.lastPosition.height + value.translation.height
    104. case .bottom:
    105. model.size.height = max(100, model.lastSize.height + value.translation.height)
    106. }
    107. model.isResizing = true
    108. }
    109. .onEnded { _ in
    110. model.lastSize = model.size
    111. model.lastPosition = model.position
    112. model.isResizing = false
    113. }
    114. )
    115. }
    116. .position(x: position == .left || position == .topLeft || position == .bottomLeft ? 0 : model.size.width,
    117. y: position == .top || position == .topLeft || position == .topRight ? 0 : model.size.height)
    118. }
    119. }
    120. // Positionen für die Resize-Griffe
    121. enum ResizePosition {
    122. case topLeft, topRight, bottomLeft, bottomRight, left, right, top, bottom
    123. }
    Alles anzeigen