Vektorski diamanti

Prejšnji vikend na //publish/ Hackathonu v Brežicah sem želel narediti igro, kjer sestavni del igre so diamanti. Kot mentor nisem imel veliko časa za izdelavo igre in sem raje izdelal fitnes aplikacijo Heart rate sensor for Zephyr HxM (že v WP trgovini). Preden sem šel na to aplikacijo, sem že naredil nekaj diamantov. Trenutno nimam časa za razvoj igre, če pa katerega zanimajo diamanti ali pa želi vedeti, kako enostavno narediti vektorske slike v XAML, je to pravi post.

image

XAML koda vseh likov je čisto spodaj.

Načrt

Prvo si je potrebno narisati like. Včasih je pametno večkrat narisati lik, da dobite čim lepši lik.

image

imageimage

Opcijsko lahko tudi narišete lik na karo papir s koordinatnim sistemom. Jaz sem za primer narisal modri diamant na karo papir:

image

 

Kontrola Path

Preden gremo na izdelavo lika v XAML-u, bi rad na kratko predstavi XAML kontrolo Path. V tej kontroli lahko vektorsko definiramo obliko kontrole s pomočjo Path markup sintakse (MSDN Path Markup Syntax). Za ta primer potrebujemo vedeti le 3 komande: M, L in Z.

Komanda M in 2 točki predstavljata začetek risanja. Npr. M 10,0 pomeni, da bomo začeli risati na lokaciji X = 10 in Y = 0.

Komanda L in 2 točki predstavlja končno lokacijo črte glede na zadnjo lokacijo. Če imamo ukaze M 0,0 L 10,20, bo to narisalo črto od točke 0,0 do točke 10,20. Če dodamo še L 0,20, bo narisalo še eno črto od 10,20 do 10,0.

Z je za zaključek lika. Avtomatično poveže prvo in zadnjo točko.

Opomba: Koordinatni sistem ima obrnjeno y os. To pomeni, da Y = 0 je na vrhu, ne spodaj.

image

 

Izdelava XAML kontrole

Izdelavo te kontrole bom razdelil na 3 dele: Ozadje, okvir in senco.

1) Ozadje

Ozadje je enostavni štirikotnik s solidno barvo.

<Path Data="M30,0 L60,40 L30,80 L0,40 Z" Fill="SteelBlue" Stretch="Fill" />

image

2) Obroba

Nato s novim Path narišemo črte na to ozadje. Prvo narišemo obrobo okoli lika in nato še narišemo črte znotraj lika.

<Path Data="M30,0 L60,40 L30,80 L0,40 L30,0 L15,45 L30,80 L45,45 L30,0 L60,40 L45,45 L15,45 L0,40" Stroke="#77000000" Stretch="Fill" />

image

3) Sence

Za lepši izgled diamanta še dodamo senco. Jaz sem senco sestavil iz dveh delov, lahko se jo tudi sestavi iz enega samega dela.

<Path Data="M30,0 L15,45 L0,40" Fill="#77000000" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top" Width="30" Height="45" />
<Path Data="M0,40 L15,45 L30,80" Fill="#77000000" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="30" Height="40" />

image

 

Zaključek

Prednost takšnega pristopa izdelave likov je večji nadzor nad velikostjo lika, barvami ozadja, senc in drugih detajlov. S malo spremembo barve ozadja in sence lahko spremenim izgled diamanta:

imageimage

 

XAML koda za vse like:

Diamant

<Viewbox>
    <Grid Width="60" Height="80">
        <Path Data="M30,0 L60,40 L30,80 L0,40 Z" Fill="SteelBlue" Stretch="Fill" />
        <Path Data="M30,0 L60,40 L30,80 L0,40 L30,0 L15,45 L30,80 L45,45 L30,0 L60,40 L45,45 L15,45 L0,40" Stroke="#77000000" Stretch="Fill" />
        <Path Data="M30,0 L15,45 L0,40" Fill="#77000000" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Top" Width="30" Height="45" />
        <Path Data="M0,40 L15,45 L30,80" Fill="#77000000" Stretch="Fill" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="30" Height="40" />
    </Grid>
</Viewbox>

image

 

Emirald

<Viewbox>
    <Grid Width="80" Height="80">
        <Path Data="M20,0 L60,0 L80,20 L80,60 L60,80 L20,80 L0,60 L0,20 Z" Fill="LimeGreen" />
        <Path Data="M20,0 L60,0 L80,20 L80,60 L60,80 L20,80 L0,60 L0,20 L20,0" Stroke="#77000000" />
        <Path Data="M20,0 L60,0 L80,20 L80,60 L60,80 L20,80 L0,60 L0,20 L20,0" Stroke="#77000000" Stretch="Fill" Margin="14" />
        <Path Data="M0,20 L14,27 M20,0 L27,14 M60,0 L53,14 M80,20 L66,27 M80,60 L66,53 M60,80 L53,66 M20,80 L27,66 M0,60 L14,53" Stroke="#77000000" />
        <Path Data="M0,20 L14,27 L27,14 L20,0 Z" Fill="#44000000" />
        <Path Data="M0,20 L14,27 L14,53 L0,60 Z" Fill="#77000000" />
        <Path Data="M0,60 L14,53 L27,66 L20,80 Z" Fill="#44000000" />
    </Grid>
</Viewbox>

image

 

Ruby

<Viewbox>
    <Grid Width="80" Height="80">
        <Path Data="M0,30 L20,0 L60,0 L80,30 L40,80 Z" Fill="Red" Stroke="#77000000" />
        <Path Data="M0,30 L25,40 L55,40 L80,30" Stroke="#77000000" />
        <Path Data="M20,0 28,16 52,16, 60,0 M25,39.5 28,16 M55,39.5 52,16 M25,40.3 40,80 M55,40.3 40,80" Stroke="#77000000" />

        <Path Data="M0,30 20,0 28,16 25,40 Z" Fill="#66000000" />
        <Path Data="M0,30 25,40 40,80 Z" Fill="#66000000" />
    </Grid>
</Viewbox>

image

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: