199 lines
4.9 KiB
Markdown
199 lines
4.9 KiB
Markdown
# Handschrift-Variationen - Konfiguration
|
||
|
||
## Aktuelle Einstellungen
|
||
|
||
### 1. Scriptalizer Error Frequency
|
||
```
|
||
SCRIPTALIZER_ERR_FREQUENCY=0
|
||
```
|
||
- **Bedeutung:** Keine durchgestrichenen Wörter oder Tippfehler
|
||
- **Ergebnis:** Saubere, fehlerfreie Handschrift
|
||
|
||
---
|
||
|
||
### 2. Wortabstands-Variation: **15%**
|
||
|
||
**Implementierung:** `src/lib/svg-font-engine.js`
|
||
|
||
```javascript
|
||
// Leerzeichen mit 15% Variation
|
||
const baseSpace = fontSizePx * 0.4;
|
||
const variation = baseSpace * 0.15 * (Math.sin(wordIndex * 2.5) * 0.5 + 0.5);
|
||
const spacePx = baseSpace + variation;
|
||
```
|
||
|
||
**Effekt:**
|
||
- Basis-Wortabstand: 40% der Schriftgröße (≈10.4 px bei 26px Font)
|
||
- Variation: ±1.56 px (15% von 10.4px)
|
||
- Natürliche, ungleichmäßige Abstände zwischen Wörtern
|
||
|
||
---
|
||
|
||
### 3. Wort-Rotation (Schräglage): **±5%** (≈±2.5°)
|
||
|
||
**Implementierung:** `src/lib/svg-font-engine.js`
|
||
|
||
```javascript
|
||
// Rotation zwischen -2.5° und +2.5° (±0.044 radians)
|
||
const rotationVariation = 0.044 * (Math.sin(wordIndex * 3.7) * 0.5 + 0.5) - 0.022;
|
||
wordRotation = rotationVariation;
|
||
|
||
// Matrix-Transformation mit Rotation
|
||
const cosR = Math.cos(wordRotation);
|
||
const sinR = Math.sin(wordRotation);
|
||
const transform = `matrix(${scale * cosR},${scale * sinR},${-scale * sinR},${-scale * cosR},${x},${baselineY})`;
|
||
```
|
||
|
||
**Effekt:**
|
||
- Jedes Wort bekommt eine individuelle, leichte Schräglage
|
||
- Rotation: -2.5° bis +2.5° (±0.044 Radians)
|
||
- Macht die Handschrift natürlicher und lebendiger
|
||
- Jedes Wort ist leicht unterschiedlich geneigt
|
||
|
||
---
|
||
|
||
## Variation-Pattern
|
||
|
||
### Sinuswellen-Basis
|
||
Beide Variationen verwenden Sinuswellen für natürliche, nicht-gleichförmige Muster:
|
||
|
||
```javascript
|
||
Math.sin(wordIndex * 2.5) // Wortabstand (langsame Oszillation)
|
||
Math.sin(wordIndex * 3.7) // Rotation (schnellere Oszillation)
|
||
```
|
||
|
||
**Vorteil:**
|
||
- Keine zufälligen Sprünge
|
||
- Sanfte, natürliche Übergänge
|
||
- Reproduzierbar (gleicher Text → gleiche Variation)
|
||
- Kein Seed-Management nötig
|
||
|
||
---
|
||
|
||
## Visuelle Beispiele
|
||
|
||
### Ohne Variation (alt):
|
||
```
|
||
Hallo Max Mustermann aus Berlin
|
||
```
|
||
Alle Wörter perfekt gerade, gleiche Abstände
|
||
|
||
### Mit Variation (neu):
|
||
```
|
||
Hallo Max Mustermann aus Berlin
|
||
↗ → ↘ → ↗
|
||
```
|
||
- Unterschiedliche Wortabstände (15% Variation)
|
||
- Leichte Schräglage pro Wort (±2.5°)
|
||
|
||
---
|
||
|
||
## Technische Details
|
||
|
||
### SVG Matrix-Transformation
|
||
|
||
**Original (ohne Rotation):**
|
||
```xml
|
||
<path transform="matrix(0.00846,0,0,-0.00846,75.6,120.5)" />
|
||
```
|
||
|
||
**Neu (mit Rotation):**
|
||
```xml
|
||
<path transform="matrix(0.00845,0.00004,-0.00004,-0.00845,75.6,120.5)" />
|
||
```
|
||
|
||
Die kleinen Werte in Position 2 und 3 der Matrix erzeugen die Rotation:
|
||
- Position 2 (b): `scale * sin(rotation)` ≈ 0.00004
|
||
- Position 3 (c): `-scale * sin(rotation)` ≈ -0.00004
|
||
|
||
---
|
||
|
||
## Anpassung der Variationen
|
||
|
||
### Wortabstand ändern
|
||
|
||
**Datei:** `src/lib/svg-font-engine.js` (Zeile 187-189)
|
||
|
||
```javascript
|
||
// Aktuell: 15%
|
||
const variation = baseSpace * 0.15 * (Math.sin(wordIndex * 2.5) * 0.5 + 0.5);
|
||
|
||
// Mehr Variation (z.B. 25%):
|
||
const variation = baseSpace * 0.25 * (Math.sin(wordIndex * 2.5) * 0.5 + 0.5);
|
||
|
||
// Weniger Variation (z.B. 8%):
|
||
const variation = baseSpace * 0.08 * (Math.sin(wordIndex * 2.5) * 0.5 + 0.5);
|
||
```
|
||
|
||
---
|
||
|
||
### Rotation (Schräglage) ändern
|
||
|
||
**Datei:** `src/lib/svg-font-engine.js` (Zeile 200-202)
|
||
|
||
```javascript
|
||
// Aktuell: ±2.5° (0.044 radians)
|
||
const rotationVariation = 0.044 * (Math.sin(wordIndex * 3.7) * 0.5 + 0.5) - 0.022;
|
||
|
||
// Stärker schräg (z.B. ±5°):
|
||
const rotationVariation = 0.087 * (Math.sin(wordIndex * 3.7) * 0.5 + 0.5) - 0.0435;
|
||
|
||
// Weniger schräg (z.B. ±1°):
|
||
const rotationVariation = 0.0175 * (Math.sin(wordIndex * 3.7) * 0.5 + 0.5) - 0.00875;
|
||
|
||
// Keine Rotation (deaktivieren):
|
||
const rotationVariation = 0;
|
||
```
|
||
|
||
**Umrechnung Grad → Radians:**
|
||
```
|
||
Radians = Grad × (π / 180)
|
||
±1° = ±0.0175 rad
|
||
±2.5° = ±0.044 rad
|
||
±5° = ±0.087 rad
|
||
```
|
||
|
||
---
|
||
|
||
## Test-Beispiel
|
||
|
||
```bash
|
||
curl -X POST http://localhost:4000/api/preview/batch \
|
||
-H "Content-Type: application/json" \
|
||
-d '{
|
||
"sessionId": "variation-demo",
|
||
"letters": [{
|
||
"index": 0,
|
||
"format": "a4",
|
||
"font": "tilda",
|
||
"text": "Dies ist ein Test mit natürlicher Handschrift-Variation.\n\nDie Wörter haben unterschiedliche Abstände und eine leichte Schräglage.\n\nDas macht das Schriftbild authentischer!",
|
||
"placeholders": {}
|
||
}]
|
||
}'
|
||
```
|
||
|
||
---
|
||
|
||
## Performance
|
||
|
||
**Impact:**
|
||
- Minimaler Overhead durch sin/cos Berechnungen
|
||
- Pro Zeichen: ~4 zusätzliche Operationen
|
||
- Bei 2000 Zeichen: ~0.5ms zusätzliche Verarbeitungszeit
|
||
- Vernachlässigbar im Vergleich zur Scriptalizer API (1-3 Sekunden)
|
||
|
||
---
|
||
|
||
## Kompatibilität
|
||
|
||
✅ **Alle SVG-Viewer** unterstützen Matrix-Transformationen
|
||
✅ **Alle Browser** (Chrome, Firefox, Safari, Edge)
|
||
✅ **Plotter-Software** verarbeitet transformierte Pfade korrekt
|
||
✅ **Keine Änderung der Pfad-Daten** (nur Transformation)
|
||
|
||
---
|
||
|
||
**Version:** 1.1.0
|
||
**Letzte Änderung:** 2026-01-02
|
||
**Status:** Produktionsreif ✅
|