Repository navigation
perf: Web-Canvas cached die fertige Zeichnung, Live-Strich ohne Komplett-Redraw (#358) - #361
Merged
Merged
Conversation
…Redraw (#358) Der Redraw-Effekt in DrawingCanvas.web.tsx hing an currentPath und lief bei jeder Mausbewegung komplett durch: clear, alle Striche, jeder Fill mit vollem getImageData/Flood-Fill/putImageData. Jetzt zwei Effekte: - Basis-Effekt (paths, Größe): rendert die fertige Zeichnung und cached sie in einem Offscreen-Canvas - Live-Strich-Effekt (currentPath, Farbe, Stärke, Tool): kopiert den Snapshot zurück und zeichnet nur den aktuellen Strich Zusätzlich EMPTY_PATHS als stabiler Default (kein neues []-Array pro Render). Test zählt getImageData-Aufrufe: vorher 44 für 20 Moves mit 2 Fills, jetzt 2. Nicht enthalten: Replay-Frames (Skalierung ändert sich pro Frame, bleibt in #358 offen). Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017fxbsNALrmwMj7LGMDPLw2
🔀 Mergeability-Report✅ Konfliktfrei mergebar ( CI-Checks: ✅ keine fehlgeschlagenen Checks ⏳ mergeability / mergeability Merge-Checkliste
Kostenlos generiert von reusable-mergeability.yml · keine API-Kosten · review-gate: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull Request
Beschreibung
Teil von #358: Die Web-Zeichenfläche (
components/DrawingCanvas.web.tsx) hat bei jeder Mausbewegung alles neu gezeichnet. Alle Striche und jeder gespeicherte Fill (vollergetImageData→ Flood-Fill-Scan →putImageDataüber die Fläche) liefen erneut, weilcurrentPathim Redraw-Effekt stand.Jetzt zwei Effekte:
paths, Größe,onDrawingChange): rendert die fertige Zeichnung und cached sie in einem Offscreen-Canvas (snapshotRef).currentPath, Farbe, Stärke, Tool): kopiert den Snapshot zurück und zeichnet nur den aktuellen Strich darüber.Außerdem gibt es
EMPTY_PATHSals stabilen Default. Vorher erzeugte das Default-[]bei jedem Render ein neues Array und löste den Basis-Effekt jedes Mal aus.Messung (neuer Test, 20 Moves, 2 gespeicherte Fills):
getImageData-Aufrufe vorher 44, jetzt 2.Nicht enthalten (#358 bleibt offen)
Der Replay-Teil: Dort kommt pro Frame ein neues
paths-Array. Im Replay wird die Skalierung aus den sichtbaren Pfaden berechnet und ändert sich deshalb von Frame zu Frame. Ein Prefix-Cache wäre dort nicht ohne Verhaltensänderung möglich. Native (computeNativeFillLayers) ist ebenfalls unverändert. Die fertigen Striche dort sind seit #356 bereits gecacht.Art der Änderung
Cross-Platform Kompatibilität
Betrifft dieser PR plattformspezifischen Code? Ja, nur
DrawingCanvas.web.tsx. Dasdocument.createElement('canvas')steht in einer reinen Web-Datei und trägt den// platform-safe-Kommentar. Native ist unverändert.Testing Checklist
npm testundtest:ci: 459/459 grün,expo export --platform webokDrawingCanvas.web.test.tsx(3 Tests); der Kern-Test schlägt gegen den alten Code fehl (erwartet 2, erhalten 44)/creative) geprüft: Rechteck zeichnen → füllen → zweiten Strich ziehen. Die Füllung bleibt beim Live-Strich erhalten, der Live-Strich erscheint korrekt.🤖 Generated with Claude Code
https://claude.ai/code/session_017fxbsNALrmwMj7LGMDPLw2
Generated by Claude Code