BGRA Controls - SVG - frei skalierbare Grafik

Rund um die LCL und andere Komponenten
Antworten
PeterS
Beiträge: 209
Registriert: So 22. Feb 2015, 11:36
OS, Lazarus, FPC: L 4.4
CPU-Target: win32, win64

BGRA Controls - SVG - frei skalierbare Grafik

Beitrag von PeterS »

Hi zusammen,

ich würde gerne eine Komponente bauen, die als Switch funktioniert.
Vom Aussehen her wie die Schalter in "Einstellungen" in Android auf dem Handy.

Dazu habe ich ein wenig programmiert und zwei passende SVGs "gebaut", mit LibreOffice.
Siehe Anhang.
Test SVG Button 01.png
Test SVG Button 01.png (12.68 KiB) 254 mal betrachtet
Je nach Skalierung sieht man aber im gerenderten Bild Linien,
obwohl sich die einzelnen Elemente im SVG leicht überlappen. :(

Muss ich die SVGs anders bauen ? Oder rendert da was falsch ?
Dateianhänge
Test SVG Button 01.zip
(113.03 KiB) 14-mal heruntergeladen
SVG Switches horizontal.zip
(4.75 KiB) 13-mal heruntergeladen

Benutzeravatar
Ally
Beiträge: 303
Registriert: Do 11. Jun 2009, 09:25
OS, Lazarus, FPC: Win und Lazarus Stable release
CPU-Target: x64

Re: BGRA Controls - SVG - frei skalierbare Grafik

Beitrag von Ally »

Hallo PeterS,
Dazu habe ich ein wenig programmiert und zwei passende SVGs "gebaut", mit LibreOffice.
wenn du dich intensiver mit SVG's beschäftigen möchtest würde ich dir "Inkscape" empfehlen.
Je nach Skalierung sieht man aber im gerenderten Bild Linien, obwohl sich die einzelnen Elemente im SVG leicht überlappen. :(
Das liegt daran das du die zusammengehörigen Pfade noch nicht verbunden hast, was dann beim umsetzen in ein Pixelbild zu solchen Effekten führen kann.

Den On- und den Off-Button habe ich noch einmal neu gezeichnet.
Bei den Einheiten habe ich Pixel und nicht Millimeter verwendet. Warum? Das Ziel für die Grafik ist ja letztendlich ein Bildschirm und der setzt das Bild aus Pixeln zusammen. Auch noch wichtig - wähle die Größe so wie du sie für 96 DPI benötigst (das ist Standard bei Desktopmonitoren).
Smartpohne's haben zwar viel höhere Auflösungen, aber das ist ja, dank SVG, kein Problem. Die Grafik wird dann einfach hoch-skaliert.

Switch-ON-horizontal New.png
Switch-ON-horizontal New.png (1.22 KiB) 195 mal betrachtet
Switch-OFF-horizontal New.png
Switch-OFF-horizontal New.png (1.61 KiB) 195 mal betrachtet
Dateianhänge
Switch.zip
(3.5 KiB) 11-mal heruntergeladen

PeterS
Beiträge: 209
Registriert: So 22. Feb 2015, 11:36
OS, Lazarus, FPC: L 4.4
CPU-Target: win32, win64

Re: BGRA Controls - SVG - frei skalierbare Grafik

Beitrag von PeterS »

Hallo Ally,

vielen Dank für die Hinweise, insbesondere für die beiden Buttons !
Ich habe mir schon gedacht daß ich noch was dazu lernen muss
um diese SVGs richtig zu "bauen".

Inkscape habe ich mir gerade herunter geladen und werde es nachher mal installieren.

PeterS
Beiträge: 209
Registriert: So 22. Feb 2015, 11:36
OS, Lazarus, FPC: L 4.4
CPU-Target: win32, win64

Re: BGRA Controls - SVG - frei skalierbare Grafik

Beitrag von PeterS »

Inkscape scheint sehr mächtig zu sein.
Ich denke, das wird mehr Einarbeitungszeit brauchen.

Deine SVGs rendern jedenfalls sauber !
Test SVG Button 02.png
Test SVG Button 02.png (12.98 KiB) 139 mal betrachtet
Testprojekt 02 ist im Anhang
Dateianhänge
Test SVG Button 02.zip
(132.05 KiB) 7-mal heruntergeladen

Antworten