PatioPlanner 2.0 baut den gesamten Editor neu. Sie können jetzt mehrere Flächen auf einer Zeichnung anlegen, per Touch navigieren und aus fünf neuen Verlegemustern wählen.
Der neue Canvas-Editor
Der Editor basiert jetzt auf einer Canvas-Engine (Konva.js) statt SVG.
Mehrere Flächen auf einer Zeichnung
Bisher konnten Sie nur ein einzelnes Polygon planen. In Version 2.0 können Sie beliebig viele Flächen auf derselben Zeichnung anlegen. Jede mit eigenem Verlegemuster, eigener Steinfarbe und individueller Fugenbreite.
Typische Anwendung: Hauptterrasse mit Fischgrätenmuster + Gartenweg mit Läuferverband + Sitzecke mit Opus Romano, alles auf einer Zeichnung, mit einer Einkaufsliste.
Polygone zeichnen
- Punkt-für-Punkt: Klicken Sie Eckpunkte, sehen Sie die Ghost-Line zur aktuellen Mausposition, schließen Sie mit Doppelklick oder Klick auf den ersten Punkt.
- Rechteck-Modus: Zwei Klicks für gegenüberliegende Ecken fertig.
- Live-Vorschau: Ab drei Punkten sehen Sie die Fläche schattiert, mit Maßangaben an jeder Kante.
Touch-Navigation für Tablet & Smartphone
- Pinch-to-Zoom: Zwei Finger zum Vergrößern und Verkleinern wie in Google Maps.
- Zwei-Finger-Pan: Verschieben Sie den Ausschnitt mit zwei Fingern.
- Trackpad-Scroll: Am MacBook scrollen Sie zum Pannen, Ctrl+Scroll zum Zoomen.
Kontextmenü per Rechtsklick
Klicken Sie mit der rechten Maustaste auf ein Polygon:
- Farbe direkt ändern (8 Vorauswahl-Farben)
- Duplizieren (Kopie +50 mm versetzt)
- Um 90° drehen
- Löschen
Weitere Editor-Verbesserungen
- Zoom-Buttons + Mausrad-Zoom mit prozentualer Anzeige
- Fit-to-View setzt Zoom und Position zurück
- Vertex löschen per Doppelklick auf einen Eckpunkt
- Polygon verschieben durch Drag auf die aktive Fläche
- Responsive Canvas: Passt sich der Fensterbreite an
- Gleichgroße Eckpunkte unabhängig vom Zoom-Level
Neue Verlegemuster
Opus Romano (12-Stein-Verband)
Das Opus Romano ist ein verbreiteter Mehrformat-Verband. Es verwendet vier Steinformate in einem 1200 × 1200 mm Rapport mit exakt 12 Steinen ohne eine einzige durchgehende Kreuzfuge.
| Format | Maße | Anzahl pro Rapport |
|---|---|---|
| Klein (A) | 200 × 200 mm | 4 Stück |
| Mittel (B) | 400 × 200 mm | 2 Stück |
| Groß (C) | 400 × 400 mm | 4 Stück |
| XL (D) | 600 × 400 mm | 2 Stück |
Viele Hersteller bieten genau diese Mischung als Palettenpaket an. PatioPlanner berechnet den exakten Bedarf pro Format.
Wilder Verband (Ashlar, 4 Formate)
Der Ashlar-Verband nutzt dieselben vier Formate, aber in einem kompakteren 1000 × 1000 mm Rapport. Ideal für kleinere Flächen, die dennoch lebendig wirken sollen.
Mehrformat-Fischgrät
Ein Fischgrätenmuster mit drei verschiedenen Steingrößen (200×100, 200×200, 300×200). Die Steine treffen sich an Rechtwinkeln wie beim klassischen Fischgrät, aber die Größenvariation erzeugt ein abwechslungsreicheres Bild.
Windmühle (Pinwheel)
Quadratstein in der Mitte, umgeben von vier Rechtecksteinen: der klassische Windmühlen-Verband. Zwei Steinformate.
Läufer-Binder-Verband
Drei abwechselnde Schichten: Läufer (horizontal), versetzt mit Akzentsteinen und Binder (vertikal). Zwei Steinformate für ein rhythmisches Fugenbild.
Einkaufsliste: Aggregation über alle Flächen
Die Einkaufsliste summiert jetzt automatisch über alle Polygone:
- Steine: Pro Steintyp zusammengefasst (über alle Muster hinweg)
- Unterbau: Gesamtfläche aller Polygone → eine Bestellung Schotter + Splitt
- Randsteine: Gesamtumfang aller Flächen
- Fugenmaterial: Pro Polygon berechnet (unterschiedliche Fugenbreiten möglich), dann summiert
Share & Export
- Share-Link: Kodiert jetzt die komplette Szene (alle Polygone mit Styles)
- PNG-Export: Mit Wasserzeichen, 2× Auflösung
- PDF/Druck: A4 Querformat, Canvas skaliert auf Seitenbreite, Einkaufsliste auf Folgeseite
Technisch unter der Haube
- Canvas-Engine: Konva.js 10.3 (Canvas-basiert statt SVG → bessere Performance bei vielen Steinen)
- Architektur: Normalisierter
$scene-Store mit Entity-Modell, reaktiven Computed-Derivaten - Performance: Memoized Tiling-Berechnung, Single-Shape-Rendering für tausende Steine
- Persistenz: Automatische Migration vom alten Single-Surface-Format
Jetzt ausprobieren
Öffnen Sie den Planer und zeichnen Sie Ihre erste Multi-Flächen-Terrasse. Wählen Sie für jede Fläche ein anderes Muster; die Einkaufsliste fasst alles zusammen.