Silverlight 3.0 : Práca s obrázkami

Najjednoduchším multimediálnym prvkom je obrázok. Pre jeho zobrazenie slúži XAML tag:

<Image Source="Nice124.JPG">
</Image>

Parameter Source udáva URL adresu obrázku. V príklade je súbor s obrázkom umiestnený priamo do priečinka Silverlight aplikácie.

Zobrazenie obrázku

Pomocou Objektu Clip je možné obrázok vhodne „zarámovať“, teda umiestniť do geometrického objektu:

<Image Source="Nice124.jpg"
Width="200" Height="150">
	<Image.Clip>
		<EllipseGeometry RadiusX="100" RadiusY="75" Center="100,75"/>
	</Image.Clip>
</Image>

Môžete skúsiť využiť vlastnosť Opacity pre neostrý okraj.

Obrázok je možné využiť aj ako podklad pre vyplnenie, podobne ako štetec. Pomocou objektu ImageBrush je možné vytvoriť nadpis, ktorý nebude vyplnený farbou, ale motívom obrázku:

<Grid x:Name="LayoutRoot" Background="White">
	<TextBlock Margin="20" FontFamily="Verdana" FontSize="120" 
	FontWeight="Bold">
		MONACO
		<TextBlock.Foreground>
			<ImageBrush ImageSource="Nice124.JPG"/>
		</TextBlock.Foreground>
	</TextBlock>
</Grid>

Využitie obrázku pre vyfarbenie objektu

Môžete taktiež vyskúšať rôzne Pixel Shaders efekty:

<Canvas x:Name="LayoutRoot" Background="White">
	<Image x:Name="img1" Source="Nice124.JPG" Canvas.Left="1"></Image>
	<Image x:Name="img2" Source="Nice124.JPG" Canvas.Left="300">
		<Image.Effect>
			<BlurEffect Radius="8"></BlurEffect>
		</Image.Effect>
	</Image>
	<Image x:Name="img3" Source="Nice124.JPG" Canvas.Left="600">
		<Image.Effect>
			<DropShadowEffect ShadowDepth="30"></DropShadowEffect>
		</Image.Effect>
	</Image>
</Canvas>

Pixel Shaders

Deep Zoom

Pre zobrazenie obrázkov využívajúcich Deep Zoom je potrebné vytvoriť súbor obrázkov, takzvanú pyramídu v rôznom zväčšení. Spravidla najnižším rozlíšením je 256 x 256 pixlov. Pre tento účel je potrebné nainštalovať aplikáciu Deep Zoom Composer.

Princíp rozkladu obrázku pomocou aplikácie Deep Zoom Composer

Ukážeme príklad zobrazenia obrázku v rôznom stupni rozlíšenia. V aplikácii Deep Zoom Composer si po vytvorení nového projektu všimnite v hornej časti jednoduchú nástrojovú lištu s tromi tlačidlami:

• Import,
• Compose,
• Export.

Pomocou týchto tlačidiel sa prepína režim pracovnej obrazovky aplikácie. Najskôr v záložke Import pridajte obrázok v najvyššom požadovanom rozlíšení pomocou tlačidla Add image.

Po prepnutí do režimu Compose umiestnite obrázok na pracovnú plochu. V originálnej terminológii sa táto návrhová plocha nazýva artboard. Zvoľte veľkosť obrázku.

Deep Zoom Composer

Dej pokračuje v poslednom priečinku Compose. V záložke Custom zvoľte typ exportu Silverlight Deep Zoom a aktivujte tlačidlo Export. Výstup a zväčšovanie si môžete vyskúšať po ukončení exportu v testovacej aplikácii.

Prezeranie výstupu z aplikácie Deep Zoom Composer v testovacej aplikácii

Vytvorte novú aplikáciu a výstup exportu z aplikácie Deep Zoom Composer umiestnite do jeho priečinka. Do projektu pridajte XAML tag:

<MultiScaleImage x:Name="deepZoomObject" Source="dzc_output.xml" /> 

Ak chcete zväčšovanie a zmenšovanie ovládať, je potrebné pridať udalosti a ich obslužný kód:

<MultiScaleImage x:Name="deepZoomObject" Source="dzc_output.xml" 
MouseEnter="DeepZoomObject_MouseEnter"
MouseLeave="DeepZoomObject_MouseLeave"/> 

Element MultiScaleImage

Obslužný kód udalostí:

private void DeepZoomObject_MouseEnter(object sender, MouseEventArgs e)
{
      this.deepZoomObject.ZoomAboutLogicalPoint(3, .5, .5);
}

private void DeepZoomObject_MouseLeave(object sender, MouseEventArgs e)
{
   double zoom = 1;
   zoom = zoom / 3;
   this.deepZoomObject.ZoomAboutLogicalPoint(zoom, .5, .5);
}

Možnosti tejto črty odporúčame vyskúšať napríklad na http://memorabilia.hardrock.com/ alebo na hlavnej stránke projektu Silverlight.

Využitie grafického procesora

Aj tie najlacnejšie klientske počítače dnes disponujú pomerne výkonným grafickým adaptérom, ktorý pri väčšine webových aplikácií doslova zaháľa a o grafické zobrazenie sa stará CPU. Silverlight 3 umožňuje pre graficky náročné operácie využiť aj výkon grafickej karty. Skúste vytvoriť graficky náročnú aplikáciu, najlepšie s nejakou animáciou a pozrite si ako zaťažuje procesor. Následne nájdite HTML stránku hosťovacej webovej aplikácie, ktorá je súčasťou Silverlight projektu a zamerajte pozornosť na sekciu <Object>, ktorá obsahuje nastavenie parametrov:

<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">
	<param name="source" value="ClientBin/SILprvky.xap"/>
	<param name="onerror" value="onSilverlightError" />
	<param name="background" value="white" />
	<param name="minRuntimeVersion" value="3.0.40624.0" />
	<param name="autoUpgrade" value="true" />
	...
</object> 

Do sekcie vložte parameter povoľujúci využitie GPU:

<param name="EnableGPUAcceleration" value="true" />

Teraz môžete porovnať, nakoľko sa do hry zapojil grafický akcelerátor a ako sa tým odľahčilo procesoru.

Späť na obsah