Bildannotation hinzufügen: Markieren Sie Bilder mit Stift, Pfeil und Kreis

Was Sie nach diesem Kapitel können

✅ Bilder zur Planprüfung oder Codeprüfung anhängen
✅ Mit dem Stift-Werkzeug frei zeichnen und annotieren
✅ Mit dem Pfeil-Werkzeug wichtige Bereiche markieren
✅ Mit dem Kreis-Werkzeug Bereiche umkreisen
✅ Annotationsfarbe und Strichstärke anpassen
✅ Tastenkombinationen für schnelles Werkzeugwechseln und Operationen verwenden

Ihr aktuelles Problem

Problem 1: Bei der Prüfung von UI-Designs oder Flussdiagrammen sind Textbeschreibungen nicht intuitiv genug; problematische Bereiche müssen markiert werden.

Problem 2: Sie möchten der Codeprüfung Screenshots mit Anmerkungen hinzufügen, können aber nur "hier ist ein Problem" mit Text erklären und können nicht direkt auf dem Bild markieren.

Problem 3: Sie erhalten von Ihrem Team geteilte Bildlinks und möchten schnell Feedback markieren, aber möchten nicht lokal herunterladen und mit anderen Tools bearbeiten.

Plannotator kann Ihnen helfen:

Direkt im Browser Bilder annotieren, ohne lokales Herunterladen
Drei Werkzeuge: Stift, Pfeil und Kreis decken alle Annotationsszenarien ab
Fünf Farben und fünf Strichstärken für flexible Anpassung der Annotationseffekte
Tastenkombinationen zur Steigerung der Annotationseffizienz

Wann Sie diese Methode verwenden

Verwendungsszenarien:

UI-Designs, Flussdiagramme oder Architekturdiagramme müssen bei der Prüfung markiert werden
Screenshots müssen bei der Codeprüfung hinzugefügt und Codeprobleme markiert werden
Annotierte Bilder mit Teammitgliedern teilen
Wichtige Bereiche auf Bildern umkreisen oder Pfeile hinzufügen

🎒 Vorbereitung vor dem Start

Voraussetzungen

In diesem Tutorial wird angenommen, dass Sie bereits:

✅ Grundlagen der Planprüfung oder Grundlagen der Codeprüfung abgeschlossen haben
✅ Wissen, wie Sie die Planprüfungs- oder Codeprüfungsseite öffnen
✅ Die grundlegenden Annotationen kennen

Kernkonzept

Die drei Werkzeuge der Bildannotation:

Werkzeug	Icon	Tastenkombination	Verwendung
Stift	🖊️	1	Freies Zeichnen, geeignet für handschriftliche Annotationen und beliebiges Umkreisen
Pfeil	➡️	2	Wichtige Bereiche oder Richtungen markieren, geeignet für punkt-zu-punkt-Annotationen
Kreis	⭕	3	Bereiche umkreisen, geeignet um ein Element hervorzuheben

Arbeitsablauf:

Bild hochladen → Werkzeug auswählen → Farbe und Größe anpassen → auf dem Bild zeichnen → speichern

Mach es mit mir

Schritt 1: Öffnen Sie die Planprüfungs- oder Codeprüfungsseite

Warum Die Bildannotation-Funktion von Plannotator ist in die Planprüfung und Codeprüfung integriert.

Vorgehensweise

Starten Sie die Planprüfung (ausgelöst durch Claude Code oder OpenCode-Aufruf von submit_plan)
Oder führen Sie den Befehl /plannotator-review aus, um die Codeprüfung zu starten

Sie sollten sehen:

Der Browser öffnet die Prüfungsseite
Oben rechts gibt es einen "Upload"- oder "Anhang"-Button

Schritt 2: Bild hochladen

Warum Sie müssen ein Bild hochladen, bevor Sie annotieren können.

Vorgehensweise

Klicken Sie auf den "Upload"- oder "Anhang"-Button oben rechts auf der Seite
Wählen Sie das Bild aus, das Sie annotieren möchten (unterstützt PNG, JPEG, WebP)
Nach dem Hochladen wird das Bild in der Annotationsliste angezeigt

Sie sollten sehen:

Eine Bildvorschau erscheint im Annotationsbereich
Durch Klicken auf die Vorschau kann der Annotationseditor geöffnet werden

Bildquelle

Sie können Bilder auf folgende Weise erhalten:

Screenshot und Einfügen (Strg+V / Cmd+V)
Aus lokalen Dateien auswählen
Bild auf die Seite ziehen

Schritt 3: Öffnen Sie den Annotationseditor

Warum Der Annotationseditor stellt Zeichenwerkzeuge und Farbauswahl bereit.

Vorgehensweise

Klicken Sie auf die Vorschau des hochgeladenen Bildes
Der Annotationseditor wird in einem Popup geöffnet

Sie sollten sehen:

Das Bild wird zentriert angezeigt
Oben befindet sich eine Werkzeugleiste
Die Werkzeugleiste von links nach rechts: Werkzeugauswahl, Strichstärke, Farbauswahl, Rückgängig, Löschen, Speichern

Schritt 4: Verwenden Sie das Stift-Werkzeug zum freien Zeichnen

Warum Das Stift-Werkzeug eignet sich für handschriftliche Annotationen oder beliebige Formen.

Vorgehensweise

Stellen Sie sicher, dass das Stift-Werkzeug ausgewählt ist (🖊️ Icon, standardmäßig ausgewählt)
Drücken Sie die linke Maustaste und zeichnen Sie auf dem Bild
Lassen Sie die Maustaste los, um das Zeichnen abzuschließen

Sie sollten sehen:

Eine Linienbahn folgt der Mausbewegung
Nach dem Loslassen der Maus wird die gezeichnete Form auf dem Bild fixiert

Eigenschaften des Stifts

Verwendet die perfect-freehand-Bibliothek für glatte Handzeichnungseffekte
Unterstützt Druckempfindlichkeit (wenn Ihr Gerät dies unterstützt)
Je dicker der Strich, desto glatter die Linie

Schritt 5: Verwenden Sie das Pfeil-Werkzeug um wichtige Bereiche zu markieren

Warum Pfeile eignen sich für punkt-zu-punkt-Annotationen und klaren Hinweis auf die Problemposition.

Vorgehensweise

Klicken Sie auf das Pfeil-Werkzeug (➡️ Icon) oder drücken Sie die Tastenkombination 2
Klicken Sie auf das Bild, um den Startpunkt des Pfeils festzulegen
Ziehen Sie zur Zielposition und lassen Sie die Maustaste los, um den Pfeil zu zeichnen

Sie sollten sehen:

Eine gerade Linie vom Startpunkt zum Endpunkt
Am Endpunkt befindet sich ein Pfeil, der auf die Zielposition zeigt

Tipps zum Zeichnen von Pfeilen

Der Startpunkt ist das Ende des Pfeils, der Endpunkt ist die Spitze des Pfeils
Während des Ziehens können Sie die Pfeilrichtung in Echtzeit vorschauen
Geeignet für Szenarien wie "hier ist ein Problem" oder "muss hier geändert werden"

Schritt 6: Verwenden Sie das Kreis-Werkzeug um Bereiche umzukreisen

Warum Kreise eignen sich um ein Element hervorzuheben, mit klar markiertem Bereich.

Vorgehensweise

Klicken Sie auf das Kreis-Werkzeug (⭕ Icon) oder drücken Sie die Tastenkombination 3
Klicken Sie auf das Bild, um eine Seite des Kreises festzulegen
Ziehen Sie zur gegenüberliegenden Seite und lassen Sie die Maustaste los, um den Kreis zu zeichnen

Sie sollten sehen:

Ein Kreis, wobei die Verbindungslinie vom Startpunkt zum Endpunkt der Durchmesser ist
Der Mittelpunkt des Kreises ist der Mittelpunkt der Verbindungslinie der beiden Punkte

Prinzip der Kreiserstellung

Das Kreis-Werkzeug zeichnet von Rand zu Rand:

1. Klick: Eine Seite des Kreises
Ziehen: Den Durchmesser des Kreises bestimmen
Loslassen: Den Kreis zeichnen

Quellcode-Implementierung (utils.ts:95-124):

typescript

// Der Mittelpunkt ist der Mittelpunkt von Start- und Endpunkt
const cx = (x1 + x2) / 2;
const cy = (y1 + y2) / 2;

// Der Radius ist die Hälfte der Entfernung zwischen den beiden Punkten
const radius = Math.hypot(x2 - x1, y2 - y1) / 2;

Schritt 7: Annotationsfarbe anpassen

Warum Verschiedene Farben können verschiedene Annotationstypen unterscheiden (z. B. rot für Fehler, grün für Vorschläge).

Vorgehensweise

Klicken Sie auf den Farbpunkt in der Werkzeugleiste
Verfügbare Farben: Rot, Gelb, Grün, Blau, Weiß

Sie sollten sehen:

Der aktuell ausgewählte Farbpunkt wird vergrößert angezeigt
Alle neu gezeichneten Annotationen verwenden die aktuelle Farbe

Empfehlungen zur Farbverwendung

Rot: Fehler, Probleme, zu löschende Inhalte
Gelb: Warnungen, Hinweise, zu bestätigende Stellen
Grün: Vorschläge, Optimierungen, Verbesserungsvorschläge
Blau: Ergänzende Erklärungen, Notizen
Weiß: Geeignet für Bilder mit dunklem Hintergrund

Schritt 8: Strichstärke anpassen

Warum Verschiedene Strichstärken eignen sich für verschiedene Annotationsszenarien.

Vorgehensweise

Klicken Sie auf die - oder + Buttons in der Werkzeugleiste
Oder beobachten Sie die Vorschau der aktuellen Strichstärke (ein Punkt)

Sie sollten sehen:

Verfügbare Strichstärken: 3, 6, 10, 16, 24
In der Mitte der Werkzeugleiste wird ein Vorschau-Punkt der aktuellen Strichstärke angezeigt

Empfehlungen zur Strichstärke

3: Präzise Annotation kleiner Elemente (z. B. Buttons, Icons)
6: Regelmäßige Annotationen (Standardwert)
10: Dicke Linien, geeignet zum Umkreisen größerer Bereiche
16: Sehr dicke Annotationen, geeignet um wichtige Punkte zu betonen
24: Maximale Strichstärke, geeignet um sehr große Bereiche hervorzuheben

Schritt 9: Rückgängig und Löschen

Warum Beim Annotieren passieren Fehler, und Sie müssen rückgängig machen oder neu beginnen.

Vorgehensweise

Letzten Schritt rückgängig machen: Klicken Sie auf das Rückgängig-Icon (↩️) oder drücken Sie Cmd+Z / Strg+Z
Alle Annotationen löschen: Klicken Sie auf das Löschen-Icon (❌)

Sie sollten sehen:

Rückgängig: Die zuletzt gezeichnete Annotation verschwindet
Löschen: Alle Annotationen werden entfernt, das Bild wird auf den Originalzustand zurückgesetzt

Hinweis zum Löschen

Der Löschvorgang kann nicht rückgängig gemacht werden, verwenden Sie ihn mit Vorsicht. Es wird empfohlen, zuerst mit Rückgängig Schritt für Schritt zurückzugehen.

Schritt 10: Annotation speichern

Warum Nach dem Speichern wird das Bild mit den Annotationen zusammengeführt und kann in der Prüfung angezeigt werden.

Vorgehensweise

Klicken Sie auf das Speichern-Icon (✅) rechts in der Werkzeugleiste
Oder drücken Sie die Esc- oder Enter-Taste
Oder klicken Sie auf den Bereich außerhalb des Popups

Sie sollten sehen:

Das Popup wird geschlossen
Die Bildvorschau wird auf die annotierte Version aktualisiert
Das Bild ist an die aktuelle Annotation angehängt

Speichermechanismus

Wenn keine Annotationen gezeichnet wurden, wird das Originalbild gespeichert
Wenn Annotationen vorhanden sind, wird das Originalbild mit den Annotationen zu einem neuen Bild zusammengeführt
Das zusammengeführte Bild wird im PNG-Format gespeichert, um hohe Qualität zu erhalten

Kontrollpunkte ✅

Überprüfen Sie Ihre Lernergebnisse:

[ ] Erfolgreich Bilder auf die Prüfungsseite hochladen können
[ ] Die drei Werkzeuge Stift, Pfeil und Kreis zum Zeichnen von Annotationen verwenden können
[ ] Annotationsfarbe und Strichstärke anpassen können
[ ] Tastenkombinationen (1/2/3, Cmd+Z, Esc) für schnelle Operationen verwenden können
[ ] Falsche Annotationen rückgängig machen können
[ ] Annotierte Bilder speichern können

Häufige Stolpersteine

Problem 1: Pfeilrichtung falsch

Erscheinung: Der Pfeil zeigt in die falsche Richtung.

Ursache: Das Pfeil-Werkzeug zeichnet vom Startpunkt (Ende) zum Endpunkt (Spitze).

Lösung:

Neu zeichnen, stellen Sie sicher, dass der Startpunkt das Ende des Pfeils und der Endpunkt die Spitze ist
Wenn bereits gezeichnet, rückgängig machen und neu zeichnen

Problem 2: Kreisposition falsch

Erscheinung: Der Kreis umfasst nicht den Zielbereich.

Ursache: Das Kreis-Werkzeug zeichnet von Rand zu Rand, der Mittelpunkt ist der Mittelpunkt der beiden Punkte.

Lösung:

Der erste Klick ist am Rand des Zielbereichs
Ziehen Sie zur gegenüberliegenden Seite, stellen Sie sicher, dass der Zielbereich im Kreis liegt
Beim Anpassen können Sie rückgängig machen und neu zeichnen

Problem 3: Strichstärke zu dick oder zu dünn

Erscheinung: Der Annotationseffekt ist nicht ideal.

Ursache: Die Strichstärke passt nicht zum aktuellen Szenario.

Lösung:

Verwenden Sie die - oder + Buttons in der Werkzeugleiste, um die Strichstärke anzupassen
Kleine Elemente: 3-6, große Bereiche: 10-24

Problem 4: Farbe schwer zu erkennen

Erscheinung: Schwarzer Strich auf dunklem Hintergrund, Annotationen schwer zu sehen.

Ursache: Ungünstige Farbwahl.

Lösung:

Dunkler Hintergrund: Weiß oder Gelb verwenden
Heller Hintergrund: Rot, Grün oder Blau verwenden

Schnellreferenz für Tastenkombinationen

Tastenkombination	Funktion
`1`	Zum Stift-Werkzeug wechseln
`2`	Zum Pfeil-Werkzeug wechseln
`3`	Zum Kreis-Werkzeug wechseln
`Cmd+Z` / `Strg+Z`	Letzten Schritt rückgängig machen
`Esc` / `Enter`	Annotation speichern

Zusammenfassung dieses Kapitels

In diesem Kapitel haben Sie gelernt:

Bilder hochladen: Über den Upload-Button oder Einfügen auf die Prüfungsseite
Drei Annotationswerkzeuge:
- Stift (1): Freies Zeichnen, geeignet für handschriftliche Annotationen
- Pfeil (2): Punkt-zu-punkt-Annotation, geeignet um wichtige Punkte zu kennzeichnen
- Kreis (3): Bereiche umkreisen, geeignet um Elemente hervorzuheben
Annotationsstil anpassen: 5 Farben, 5 Strichstärken
Rückgängig und Löschen: Korrigieren von falschen Annotationen
Annotationen speichern: Zusammenführen von Annotationen in das Bild

Vorschau auf das nächste Kapitel

Im nächsten Kapitel lernen wir Grundlagen der Codeprüfung.
Sie werden lernen:
Wie Sie den Befehl /plannotator-review verwenden, um git diffs zu prüfen
Zwischen side-by-side und unified Ansicht wechseln
Durch Klicken auf Zeilennummern Codebereiche auswählen
Zeilenbezogene Annotationen hinzufügen (comment/suggestion/concern)
Zwischen verschiedenen diff-Typen wechseln
Feedback an AI-Agenten senden

Anhang: Quellcode-Referenz

Klicken Sie hier, um Quellcode-Positionen anzuzeigen

Aktualisierungszeit: 2026-01-24

Funktion	Dateipfad	Zeilen
Werkzeug-Typdefinition	`packages/ui/components/ImageAnnotator/types.ts`	1-40
Rendering-Funktionen	`packages/ui/components/ImageAnnotator/utils.ts`	1-148
Hauptkomponente	`packages/ui/components/ImageAnnotator/index.tsx`	1-233
Werkzeugleistenkomponente	`packages/ui/components/ImageAnnotator/Toolbar.tsx`	1-219
Annotation-Schnittstelle	`packages/ui/types.ts`	11-33

Wichtige Typen:

Tool (Werkzeugtyp):

typescript

export type Tool = 'pen' | 'arrow' | 'circle';

Point (Koordinatenpunkt):

typescript

export interface Point {
  x: number;
  y: number;
  pressure?: number;
}

Stroke (Strich):

typescript

export interface Stroke {
  id: string;
  tool: Tool;
  points: Point[];
  color: string;
  size: number;
}

AnnotatorState (Annotator-Zustand):

typescript

export interface AnnotatorState {
  tool: Tool;
  color: string;
  strokeSize: number;
  strokes: Stroke[];
  currentStroke: Stroke | null;
}

COLORS (Farb-Array):

typescript

export const COLORS = [
  '#ef4444', // red
  '#eab308', // yellow
  '#22c55e', // green
  '#3b82f6', // blue
  '#ffffff', // white
] as const;

STROKE_SIZES (Strichstärken):

typescript

const STROKE_SIZES = [3, 6, 10, 16, 24];

Wichtige Funktionen:

renderPenStroke() (Stiftstrich rendern):

Verwendet die perfect-freehand-Bibliothek für glatte Handzeichnungseffekte
Unterstützt Druckempfindlichkeit (pressure Feld)

renderArrow() (Pfeil rendern):

Zeichnet eine gerade Linie vom Startpunkt zum Endpunkt
Zeichnet die Pfeilspitze am Endpunkt

renderCircle() (Kreis rendern):

Berechnet den Mittelpunkt der beiden Punkte als Kreismittelpunkt
Berechnet die Hälfte des Abstands der beiden Punkte als Radius

renderStroke() (je nach Werkzeugtyp rendern):

Ruft die entsprechende Rendering-Funktion basierend auf dem tool Feld auf
Unterstützt Skalierung (scale Parameter)

Annotation.imagePaths (Angehängtes Bildfeld):

typescript

export interface Annotation {
  // ...
  imagePaths?: string[]; // Angehängte Bilder (lokale Pfade oder URLs)
}

Tastenkombination-Behandlung (index.tsx:33-59):

typescript

// 1/2/3 um Werkzeuge zu wechseln
if (e.key === '1') setState(s => ({ ...s, tool: 'pen' }));
if (e.key === '2') setState(s => ({ ...s, tool: 'arrow' }));
if (e.key === '3') setState(s => ({ ...s, tool: 'circle' }));

// Cmd+Z zum Rückgängig machen
if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
  e.preventDefault();
  handleUndo();
}

Bildannotation hinzufügen: Markieren Sie Bilder mit Stift, Pfeil und Kreis ​

Was Sie nach diesem Kapitel können ​

Ihr aktuelles Problem ​

Wann Sie diese Methode verwenden ​

🎒 Vorbereitung vor dem Start ​

Kernkonzept ​

Mach es mit mir ​

Schritt 1: Öffnen Sie die Planprüfungs- oder Codeprüfungsseite ​

Schritt 2: Bild hochladen ​

Schritt 3: Öffnen Sie den Annotationseditor ​

Schritt 4: Verwenden Sie das Stift-Werkzeug zum freien Zeichnen ​

Schritt 5: Verwenden Sie das Pfeil-Werkzeug um wichtige Bereiche zu markieren ​

Schritt 6: Verwenden Sie das Kreis-Werkzeug um Bereiche umzukreisen ​

Schritt 7: Annotationsfarbe anpassen ​

Schritt 8: Strichstärke anpassen ​

Schritt 9: Rückgängig und Löschen ​

Schritt 10: Annotation speichern ​

Kontrollpunkte ✅ ​

Häufige Stolpersteine ​

Problem 1: Pfeilrichtung falsch ​

Problem 2: Kreisposition falsch ​

Problem 3: Strichstärke zu dick oder zu dünn ​

Problem 4: Farbe schwer zu erkennen ​

Schnellreferenz für Tastenkombinationen ​

Zusammenfassung dieses Kapitels ​

Vorschau auf das nächste Kapitel ​

Anhang: Quellcode-Referenz ​

Bildannotation hinzufügen: Markieren Sie Bilder mit Stift, Pfeil und Kreis

Was Sie nach diesem Kapitel können

Ihr aktuelles Problem

Wann Sie diese Methode verwenden

🎒 Vorbereitung vor dem Start

Kernkonzept

Mach es mit mir

Schritt 1: Öffnen Sie die Planprüfungs- oder Codeprüfungsseite

Schritt 2: Bild hochladen

Schritt 3: Öffnen Sie den Annotationseditor

Schritt 4: Verwenden Sie das Stift-Werkzeug zum freien Zeichnen

Schritt 5: Verwenden Sie das Pfeil-Werkzeug um wichtige Bereiche zu markieren

Schritt 6: Verwenden Sie das Kreis-Werkzeug um Bereiche umzukreisen

Schritt 7: Annotationsfarbe anpassen

Schritt 8: Strichstärke anpassen

Schritt 9: Rückgängig und Löschen

Schritt 10: Annotation speichern

Kontrollpunkte ✅

Häufige Stolpersteine

Problem 1: Pfeilrichtung falsch

Problem 2: Kreisposition falsch

Problem 3: Strichstärke zu dick oder zu dünn

Problem 4: Farbe schwer zu erkennen

Schnellreferenz für Tastenkombinationen

Zusammenfassung dieses Kapitels

Vorschau auf das nächste Kapitel

Anhang: Quellcode-Referenz