Komponenty a grafika

V minulých příspěvcích jsem se věnoval stylům a možnostem jejich přizpůsobení. Víme tak, že většina komponent je ve FireMonkey tvořena s využitím základních tvarů vektorové grafiky. Ty nejběžnější najdeme v paletě nástrojů v záložce "Shapes". Navíc zde je k dispozici také třída "TPath". Tu využijeme v případech, kdy si hodláme vytvořit vlastní komponentu nebo grafický objekt, který nabídka "shapes" nepokrývá.

PATH, neboli cesta je standardizovaný zápis definice pro tvorbu nových grafických tvarů. Ve FireMonkey je lze použít také pro některé druhy animací. PATH pracují se souřadnicovým systémem, kde "x" roste směrem vpravo a "y" směrem dolů. Souřadnice bodů mohou při zápisu oddělené buď mezerou nebo čárkou.

Syntaxe PathData je velmi jednoduchá a je tvořena několika základními příkazy:

• M (Move) - Určuje počáteční bod nového obrazce
• L (Line) - Nakreslí přímku z aktuálního do určeného bodu
• H (Horizontal line) - Nakreslí horizontální přímku z aktuálního do určeného bodu
• V (Vertical line) - Nakreslí vertikální přímku z aktuálního do určeného bodu
• A (Arc) - Vykreslí Eliptickou křivku
• C (Curve) - Nakreslí obecnou křivku
• S (Smooth curve) - Vyhlazená obecná křivka
• Q (Quadratic Bézier) - kvadratická Bézierova křivka
• T (Smooth quadratic Bézier) - Vyhlazená kvadratická Bézierova křivka
• Z (Close) - Uzavření kresby

Příklady: 
přímka: "L 20,30"
trojúhelník: "M 50, 50 100, 50 100, 100 50, 50"
kruh: "M -1,0 A 1,1 0 1 1 1,0 M -1,0 A 1,1 0 1 0 1,0"

Pro složitější tvary je samozřejmě výhodnější použít místo ručního zápisu souřadnic některý z editorů podporujících SVG. Vhodnou volbou je například Inkscape. Inkscape (ke stažení na http://inkscape.org/) je volně dostupný vektorový grafický editor podobný programům jako jsou Adobe Illustrator, CorelDraw a podobně. Inkscape je založen na standardu SVG. Je tak ideálním nástrojem, který lze použít pro vytváření nových tvarů, objektů nebo cest pro animace pro FireMonkey.

V hlavní nabídce klikneme na volbu "Úpravy => Editor XML". Editor zobrazí vytvořenou grafiku jako XML dokument. V levé části okna rozbalíme strukturu dokumentu a označíme "svg:path". V pravém horním okně vybereme data ("d"). Pravé spodní okno nyní zobrazí "path data", která si zkopírujeme do schránky.

V Delphi si založíme nový projekt (File => New => FireMonkey Desktop Application) a na formulář umístíme komponentu "TPath". V inspektorovi objektů najdeme vlastnost "Data" a klikneme na tlačítko pro otevření dialogu pro vložení "PathData".

Do dialogu zkopírujeme "PathData" ze schránky. V pravé části okna se pro kontrolu okamžitě zobrazí náhled grafiky vytvořené na základě vložených dat.

Pokud jsme s výsledkem spokojeni, potvrdíme tlačítkem "OK". V inspektorovi objektů ještě můžeme změnit barvu výplně (parametr "Fill") na žlutou a je hotovo.

Stejným způsobem je možné vytvářet i cesty pro animace, které mohou být rovněž popsány za pomoci "PathData". Použití "svg" objektů je možné jak v HD tak 3D projektech.

View Petr Houf's profile