<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Flexmaniak.pl &#187; InterpolationMethod</title>
	<atom:link href="http://blog.flexmaniak.pl/tag/interpolationmethod/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.flexmaniak.pl</link>
	<description>Flex, Papervision3D, PHP, Symfony</description>
	<lastBuildDate>Sun, 02 Oct 2011 08:36:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Rysowanie gradientów w ActionScript</title>
		<link>http://blog.flexmaniak.pl/actionscript/rysowanie-gradientow-w-actionscript</link>
		<comments>http://blog.flexmaniak.pl/actionscript/rysowanie-gradientow-w-actionscript#comments</comments>
		<pubDate>Wed, 30 Jun 2010 13:59:43 +0000</pubDate>
		<dc:creator>Piotr Wierzgała</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[beginGradientFill]]></category>
		<category><![CDATA[createGradientBox]]></category>
		<category><![CDATA[GradientType]]></category>
		<category><![CDATA[graphics]]></category>
		<category><![CDATA[InterpolationMethod]]></category>
		<category><![CDATA[Rysowanie gradientów]]></category>
		<category><![CDATA[SpreadMethod]]></category>

		<guid isPermaLink="false">http://blog.flexmaniak.pl/?p=789</guid>
		<description><![CDATA[Rysowanie gradientów jest procesem, na który wpływ ma stosunkowo wiele parametrów. Żeby być w pełni świadomym możliwości jakie w tej dziedzinie oferuje Flex sprawdzimy w jaki sposób każdy z nich oddziałuje na wygląd gradientu. Spis treści Aplikacja Wstęp do rysowania gradientu Parametry rysowania gradientu Aplikacja Poniższa aplikacja pozwala przetestować sposób w jaki poszczególne parametry rysowania [...]]]></description>
			<content:encoded><![CDATA[<p>Rysowanie gradientów jest procesem, na który wpływ ma stosunkowo wiele parametrów. Żeby być w pełni świadomym możliwości jakie w tej dziedzinie oferuje Flex sprawdzimy w jaki sposób każdy z nich oddziałuje na wygląd gradientu.<br />
<span id="more-789"></span></p>
<h3>Spis treści</h3>
<ul>
<li><a href="#aplikacja">Aplikacja</a></li>
<li><a href="#wstep">Wstęp do rysowania gradientu</a></li>
<li><a href="#parametry">Parametry rysowania gradientu</a></li>
</ul>
<h3><a name="aplikacja">Aplikacja</a></h3>
<p>Poniższa aplikacja pozwala przetestować sposób w jaki poszczególne parametry rysowania gradientu wpływają na jego wygląd.<br />
<a href="http://blog.na14.pl/examples/2010-06-30_gradient_drawing/application/application.html" target="_blank" alt="Kliknij aby otworzyć aplikację w osobnym oknie"><img src="http://blog.na14.pl/examples/2010-06-30_gradient_drawing/application_thumb.jpg" /></a></p>
<h3><a name="wstep">Wstęp do rysowania gradientu</a></h3>
<p>Gradient możemy narysować na dowolnym obiekcie dziedziczącym po klasie Sprite poprzez odwołanie się do jego pola <strong>graphics</strong>, wywołanie na nim metody <strong>beginGradientFill</strong> i narysowaniu kształtu, który będzie wypełniony gradientem.</p>
<p>Schemat rysowania gradientu na prostokącie:</p>
<div class="codecolorer-container actionscript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="actionscript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">sprite.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">beginGradientFill</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">type</span>, colors, alphas, ratios, matrix, spreadMethod, interpolationMethod, focalPointRatio<span style="color: #66cc66;">&#41;</span>;<br />
sprite.<span style="color: #006600;">graphics</span>.<span style="color: #006600;">drawRect</span><span style="color: #66cc66;">&#40;</span>rectX, rectY, rectWidth, rectHeight<span style="color: #66cc66;">&#41;</span>;<br />
sprite.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">endFill</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div></div>
<p>Wszystkie parametry podane w powyższym schemacie należy zastąpić odpowiednimi wartościami, których opis znajduje się w dalszej części wpisu. Tylko cztery pierwsze parametry metody beginGradientFill są wymagane, pozostałe posiadają zdefiniowane wartości domyślne. Gradient zostanie narysowany na dowolnym kształcie geometrycznym opisanym pomiędzy wywołaniami metod beginGradientFill a endFill.</p>
<h3><a name="parametry">Parametry rysowania gradientu</a></h3>
<ul>
<li><strong>Typ gradientu</strong> (par. type)
<ul>
<li><strong>LINEAR</strong> &#8211; Gradient liniowy.<br />
				<img src="http://blog.na14.pl/examples/2010-06-30_gradient_drawing/linear.jpg" />
			</li>
<li><strong>RADIAL</strong> &#8211; Gradient promienisty.<br />
				<img src="http://blog.na14.pl/examples/2010-06-30_gradient_drawing/radial.jpg" />
			</li>
</ul>
</li>
<li><strong>Tablica kolorów</strong> (par. colors) &#8211; Określa kolory jakie zostaną użyte do narysowania gradientu. Dla gradientu liniowego podane kolory zostaną zastosowane od strony lewej do prawej natomiast w przypadku gradientu promienistego od wnętrza do zewnętrza.</li>
<li><strong>Tablica wartości alfa</strong> (par. alphas) &#8211; Określa stopień przeźroczystości kolorów zdefiniowanych w tablicy kolorów. Liczba elementów w tablicy wartości alfa musi być równa liczbie elementów w tablicy kolorów. Wartości alfa należą do przedziału <0,1>.</li>
<li><strong>Tablica proporcji</strong> (par. ratios) &#8211; Określa proporcje w jakich gradient osiągnie poszczególne kolory z tablicy kolorów. Liczba elementów w tablicy proporcji musi być równa liczbie elementów w tablicy kolorów. Wartości proporcji należą do przedziału <0,255>, gdzie 0 oznacza początek gradientu natomiast 255 jego koniec. Każda kolejna wartość w tablicy proporcji musi być większa lub równa wartości poprzedzającej ją.<br/><br/>
<p>Poniższy rysunek przedstawia trzy gradienty kolorów czarnego i białego narysowane z różnymi proporcjami.<br />
<img src="http://blog.na14.pl/examples/2010-06-30_gradient_drawing/ratios.jpg" />
</li>
<li><strong>Macierz transformacji</strong> (par. matrix) (wartość domyślna: null) &#8211; Obiekt typu <a href="http://livedocs.adobe.com/flex/3/langref/flash/geom/Matrix.html">Matrix</a>. Wywołujemy na nim metodę <strong>createGradientBox</strong> w celu określenia wyglądu gradientu. Metoda createGradientBox przyjmuje następujące parametry: </li>
<ul>
<li><strong>width</strong> &#8211; Szerokość gradientu.</li>
<li><strong>height</strong> &#8211; Wysokość gradientu.</li>
<li><strong>rotation</strong> &#8211; Obrót gradientu w radianach.</li>
<li><strong>tx</strong> &#8211; Poziome przesunięcie gradientu.</li>
<li><strong>ty</strong> &#8211; Pionowe przesunięcie gradientu.</li>
</ul>
<li><strong>Metoda rozprzestrzeniania gradientu</strong> (par. spreadMethod) (wartość domyślna: PAD) &#8211; Wymiary (szerokość i wysokość) gradientu określane są w macierzy transformacji, natomiast wymiary obszaru na jakim gradient zostanie narysowany określane są poprzez wymiary kształtu, który zostanie wypełniony gradientem. W przypadku kiedy wymiary gradientu są mniejsze od wymiarów kształtu, który wypełnia gradient sposób wypełnienia pustej przestrzeni określany jest przez parametr spreadMethod. <br/><br/>
<p>Poniższy rysunek przedstawia sposób rozprzestrzenienia gradientu za pomocą metody REPEAT w sytuacji, w której szerokość gradientu jest kilkukrotnie mniejsza niż szerokość wypełnionego nim prostokąta.</p>
<div style="width: 100%; text-align:center"><img src="http://blog.na14.pl/examples/2010-06-30_gradient_drawing/matrix_rect_width.jpg" /></div>
<ul>
<li><strong>PAD</strong> &#8211; Pustą przestrzeń wypełniają krańcowe kolory gradientu.<br />
				<img src="http://blog.na14.pl/examples/2010-06-30_gradient_drawing/pad.jpg" />
			</li>
<li><strong>REFLECT</strong> &#8211; Pustą przestrzeń wypełniają kolejne wystąpienia gradientu z odwróconą kolejnością kolorów składowych.<br />
				<img src="http://blog.na14.pl/examples/2010-06-30_gradient_drawing/reflect.jpg" />
			</li>
<li><strong>REPEAT</strong> &#8211; Pustą przestrzeń wypełniają kolejne wystąpienia gradientu.<br />
				<img src="http://blog.na14.pl/examples/2010-06-30_gradient_drawing/repeat.jpg" />
			</li>
</ul>
</li>
<li><strong>Metoda interpolacji gradientu</strong> (par. interpolationMethod) (wartość domyślna: RGB) &#8211; Określa czy zmiana koloru będzie następować w sposób liniowy czy wykładniczy.
<ul>
<li><strong>RGB</strong> &#8211; Zmiana koloru w sposób wykładniczy.<br />
				<img src="http://blog.na14.pl/examples/2010-06-30_gradient_drawing/linear.jpg" />
			</li>
<li><strong>LINEAR_RGB</strong> &#8211; Zmiana koloru w sposób liniowy.<br />
				<img src="http://blog.na14.pl/examples/2010-06-30_gradient_drawing/linear_rgb.jpg" />
			</li>
</ul>
</li>
<li><strong>Położenie ogniskowej gradientu</strong> (par. focalPointRatio) (wartość domyślna: 0) &#8211; Określa położenie ogniskowej gradientu. Wartości jakie przyjmuje ten parametr należą do zakresu od -1 do 1. Wartość 0 oznacza położenie ogniskowej na środku gradientu, natomiast wartości -1 i 1 oznaczają położenie ogniskowej na krawędziach gradientu.
<div style="width: 100%; text-align:center"><img src="http://blog.na14.pl/examples/2010-06-30_gradient_drawing/focalPointRatio.jpg" /></div>
</li>
</ul>
<p>Przykładowe narysowanie gradientu na obiekcie typu Sprite:</p>
<div class="codecolorer-container actionscript default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="actionscript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">var</span> matrix:Matrix = <span style="color: #000000; font-weight: bold;">new</span> Matrix;<br />
matrix.<span style="color: #006600;">createGradientBox</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">100</span>,<span style="color: #cc66cc;">100</span>,<span style="color: #cc66cc;">0</span>,<span style="color: #cc66cc;">0</span>,<span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
<br />
sprite.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">beginGradientFill</span><span style="color: #66cc66;">&#40;</span><br />
&nbsp; &nbsp; GradientType.<span style="color: #006600;">RADIAL</span>,<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#91;</span>0xffffff,0x000000<span style="color: #66cc66;">&#93;</span>,<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">1</span>,<span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#93;</span>,<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#91;</span><span style="color: #cc66cc;">0</span>,<span style="color: #cc66cc;">255</span><span style="color: #66cc66;">&#93;</span>,<br />
&nbsp; &nbsp; matrix,<br />
&nbsp; &nbsp; SpreadMethod.<span style="color: #006600;">REFLECT</span>,<br />
&nbsp; &nbsp; InterpolationMethod.<span style="color: #006600;">RGB</span>,<br />
&nbsp; &nbsp; <span style="color: #cc66cc;">1</span><br />
<span style="color: #66cc66;">&#41;</span>;<br />
sprite.<span style="color: #006600;">graphics</span>.<span style="color: #006600;">drawRect</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span>,<span style="color: #cc66cc;">0</span>,gradientGroup.<span style="color: #0066CC;">width</span>,gradientGroup.<span style="color: #0066CC;">height</span><span style="color: #66cc66;">&#41;</span>;<br />
sprite.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">endFill</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div></div>
]]></content:encoded>
			<wfw:commentRss>http://blog.flexmaniak.pl/actionscript/rysowanie-gradientow-w-actionscript/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

