Grafika


Poslaním moderných mobilných platforiem je uspokojiť požiadavky používateľov, ktorí chcú niečo viac než informácie, viac než rýchlosť, viac než funkcie. Namiesto technokraticky strohej funkcionality používatelia hľadajú zážitok, pocity a emócie. Tieto fenomény by sa dali zhrnúť pod komplexný pojem používateľská skúsenosť, čiže pocity a dojmy, ktoré sprevádzajú používateľa pri práci s aplikáciou bez ohľadu na jej povahu. Je to akási nadstavba nad perfektnou a presnou funkcionalitou, kedy okrem užitočnosti prináša používateľovi pozitívne pocity, vnemy a emócie pri práci s aplikáciou. O marketingovom význame týchto fenoménov netreba ani hovoriť, graficky a používateľsky príjemná aplikácia priťahuje používateľov ako magnet. Grafika je jedným zo základných pilierov tvorby prezentačného rozhrania mobilných aplikácií. Pomocou správne navrhnutej grafiky sa často dá vyjadriť oveľa viac, než pomocou textu, či tabuliek údajov. Okrem vyjadrovacej funkcie plní aj nezanedbateľnú funkciu estetickú, grafické prvky vhodne dotvárajú dizajn aplikácie.

Statická grafika definovaná v etape návrhu

XAML umožňuje definovať základné geometrické obrazce a tvary, pomocou ktorých sa dotvára dizajn prezentačného rozhrania aplikácie, prípadne sa generujú rôzne prvky obchodnej grafiky, ako sú napríklad rôzne typy grafov. Silverlight pre dvojrozmernú grafiku využíva súradnicovú sústavu s počiatkom v ľavom hornom rohu. V príklade ukážeme statické vykreslenie niekoľkých základných geometrických útvarov:

<Canvas x:Name=”ContentCanvas” Grid.Row=”1″ Background=”Transparent”

Margin=”12,0,12,0″>

<Line X1=”10″ Y1=”10″ X2=”200″ Y2=”20″ Stroke=”Blue” StrokeThickness=”5″/>

<Rectangle Width=”100″ Height=”200″ Fill=”LightGray” Stroke=”Black”

     Canvas.Top=”100″ Canvas.Left=”20″ StrokeThickness=”3″ />

<Polygon Fill=”LightGray” Points =”250,20 330,125 200,175″

Stroke =”Blue” StrokeThickness =”3″/>

<Ellipse Width=”100″ Height=”100″ Fill=”LightGray” Stroke=”Black”

Canvas.Top=”250″ Canvas.Left=”190″ />

</Canvas>

Statická grafika

Dynamická grafika

Zatiaľ čo statická grafika definovaná v XML kóde sa hodí skôr na vykresľovanie pozadia, na vykresľovanie dynamickej grafiky, či už jednoduchých hier, diagramov, schém procesov a podobne sa používa aplikačný kód. XAML kód obsahuje len prázdny objekt Canvas

<Canvas x:Name=”ContentCanvas” Grid.Row=”1″ Background=”Transparent”

Margin=”12,0,12,0″>

</Canvas>

 

Kód na vykreslenie priamky

 

public MainPage()

{

InitializeComponent();

 

Line line = new Line();

line.Stroke = new SolidColorBrush(Colors.Green);

line.StrokeThickness = 5;

Point point1 = new Point(); point1.X = 10.0; point1.Y = 10.0;

Point point2 = new Point(); point2.X = 250.0; point2.Y = 150.0;

line.X1 = point1.X; line.Y1 = point1.Y;

line.X2 = point2.X; line.Y2 = point2.Y;

this.ContentCanvas.Children.Add(line);

 

}

Vykreslenie priamky pomocou kódu

Kreslenie prstom

U prístrojov s dotykovým displejom sa námet na ďalšiu grafickú aplikáciu, plnú dynamiky ponúka sám – čo tak kresliť prstom po obrazovke. Princíp je jednoduchý. V obslužných procedúrach udalostí dotykového displeja (kvôli kompatibilite majú názvy ekvivalentné udalostiam myši) onTouchEvent budeme snímať ako udalosti dotykya pohyby prsta

private Point pAkt;

private Point pOld;

 

// Constructor

public MainPage()

{

InitializeComponent();

this.ContentCanvas.MouseMove += new MouseEventHandler(ContentCanvas_MouseMove);

this.ContentCanvas.MouseLeftButtonDown +=

new MouseButtonEventHandler(ContentCanvas_MouseLeftButtonDown);

}

 

void ContentCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

pAkt = e.GetPosition(ContentCanvas);

pOld = pAkt;

}

 

void ContentCanvas_MouseMove(object sender, MouseEventArgs e)

{

pAkt = e.GetPosition(this.ContentCanvas);

Line line = new Line() { X1 = pAkt.X, Y1 = pAkt.Y, X2 = pOld.X, Y2 = pOld.Y };

line.Stroke = new SolidColorBrush(Colors.Cyan);

line.StrokeThickness = 5; this.ContentCanvas.Children.Add(line); pOld = pAkt;

}

Kreslenie prstom

Reklamy

About Luboslav Lacko

Záujem o využitie moderných telefónov pre biznis a osobný život. Cloud computing, virtualizácia, vývoj aplikácií, business intelligence
This entry was posted in Všeobecné. Bookmark the permalink.

Pridaj komentár

Zadajte svoje údaje, alebo kliknite na ikonu pre prihlásenie:

WordPress.com Logo

Na komentovanie používate váš WordPress.com účet. Odhlásiť sa /  Zmeniť )

Google photo

Na komentovanie používate váš Google účet. Odhlásiť sa /  Zmeniť )

Twitter picture

Na komentovanie používate váš Twitter účet. Odhlásiť sa /  Zmeniť )

Facebook photo

Na komentovanie používate váš Facebook účet. Odhlásiť sa /  Zmeniť )

Connecting to %s