<?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>ADM Blog &#187; image</title>
	<atom:link href="http://blog.another-d-mention.ro/tag/image/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.another-d-mention.ro</link>
	<description>No matter how you see things, reality changes when you reach understanding</description>
	<lastBuildDate>Mon, 06 Sep 2010 11:29:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>How To &#8211; Center a image on a canvas in flex</title>
		<link>http://blog.another-d-mention.ro/programming/how-to-center-a-image-on-a-canvas-in-flex/</link>
		<comments>http://blog.another-d-mention.ro/programming/how-to-center-a-image-on-a-canvas-in-flex/#comments</comments>
		<pubDate>Sun, 12 Apr 2009 21:11:52 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Flex / ActionScript]]></category>
		<category><![CDATA[How To's]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[canvas]]></category>
		<category><![CDATA[center]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[image]]></category>

		<guid isPermaLink="false">http://blog.another-d-mention.ro/?p=294</guid>
		<description><![CDATA[This is the solution for the anoying behaivor of the image control into a canvas or hbox or whatever. If the image is set to be scaled to a maximum width and height and maintaining the aspect ration, it won't center itself even if it has the horizontalCenter set to "0". So...here's how it looks [...]


Related posts:<ol><li><a href='http://blog.another-d-mention.ro/programming/right-click-and-custom-context-menu-in-flash-flex/' rel='bookmark' title='Permanent Link: Right click and custom context menu in Flash/Flex'>Right click and custom context menu in Flash/Flex</a></li>
<li><a href='http://blog.another-d-mention.ro/programming/create-professional-flex-components/' rel='bookmark' title='Permanent Link: Create professional Flex components'>Create professional Flex components</a></li>
<li><a href='http://blog.another-d-mention.ro/programming/how-to-clone-duplicate-an-object-in-actionscript-3/' rel='bookmark' title='Permanent Link: How to clone (duplicate) an object in ActionScript 3'>How to clone (duplicate) an object in ActionScript 3</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><!-- adman --><br />
This is the solution for the anoying behaivor of the image control into a canvas or hbox or whatever. If the image is set to be scaled to a maximum width and height and maintaining the aspect ration, it won't center itself even if it has the horizontalCenter set to "0". So...here's how it looks (top) and how it suppose to look (bottom)</p>
<p><a href="http://blog.another-d-mention.ro/wp-content/uploads/2009/04/canvas.png"><img class="aligncenter size-full wp-image-295" title="canvas" src="http://blog.another-d-mention.ro/wp-content/uploads/2009/04/canvas.png" alt="canvas How To   Center a image on a canvas in flex" width="558" height="553" /></a></p>
<p><strong>Solution</strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
</pre></td><td class="code"><pre class="actionscript" style="font-family:monospace;">&nbsp;
    <span style="color: #66cc66;">&lt;</span>mx :Script<span style="color: #66cc66;">&gt;</span>
        <span style="color: #66cc66;">&lt;</span> <span style="color: #66cc66;">!</span><span style="color: #66cc66;">&#91;</span>CDATA<span style="color: #66cc66;">&#91;</span>
&nbsp;
                <span style="color: #808080; font-style: italic;">// Maximum  width</span>
                <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> mxw:<span style="color: #0066CC;">Number</span> = <span style="color: #cc66cc;">500</span>;              
                <span style="color: #808080; font-style: italic;">// Maximum height</span>
               <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> mxh:<span style="color: #0066CC;">Number</span> = <span style="color: #cc66cc;">250</span>;
&nbsp;
               <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> onImageComplete<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">e</span>:Event<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
               <span style="color: #66cc66;">&#123;</span>
                <span style="color: #000000; font-weight: bold;">var</span> wthMaxRatio:<span style="color: #0066CC;">Number</span> = mxw <span style="color: #66cc66;">/</span> mxh;
&nbsp;
                <span style="color: #808080; font-style: italic;">// no resize needed</span>
                <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">e</span>.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">contentWidth</span> <span style="color: #66cc66;">&lt;</span>= mxw <span style="color: #66cc66;">&amp;&amp;</span> <span style="color: #0066CC;">e</span>.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">contentHeight</span> <span style="color: #66cc66;">&lt;</span>= mxh<span style="color: #66cc66;">&#41;</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #0066CC;">e</span>.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">x</span> = <span style="color: #66cc66;">&#40;</span>mxw - <span style="color: #0066CC;">e</span>.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">contentWidth</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">/</span> <span style="color: #cc66cc;">2</span>;
                    <span style="color: #0066CC;">e</span>.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">y</span> = <span style="color: #66cc66;">&#40;</span>mxh - <span style="color: #0066CC;">e</span>.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">contentHeight</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">/</span> <span style="color: #cc66cc;">2</span>;
                <span style="color: #66cc66;">&#125;</span>
                <span style="color: #b1b100;">else</span>
                <span style="color: #66cc66;">&#123;</span>
                    <span style="color: #000000; font-weight: bold;">var</span> wthImgRatio:<span style="color: #0066CC;">Number</span> = <span style="color: #0066CC;">e</span>.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">contentWidth</span> <span style="color: #66cc66;">/</span> <span style="color: #0066CC;">e</span>.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">contentHeight</span>;
&nbsp;
                    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>wthImgRatio <span style="color: #66cc66;">&gt;</span> wthMaxRatio<span style="color: #66cc66;">&#41;</span>
                    <span style="color: #66cc66;">&#123;</span>
                        <span style="color: #808080; font-style: italic;">// will max out the width</span>
                        <span style="color: #0066CC;">e</span>.<span style="color: #0066CC;">target</span>.<span style="color: #0066CC;">width</span> = mxw;
                        <span style="color: #000000; font-weight: bold;">var</span> imgHeight:<span style="color: #0066CC;">Number</span> = <span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">round</span><span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#40;</span>mxw <span style="color: #66cc66;">/</span> <span style="color: #0066CC;">e</span>.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">contentWidth</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">*</span> <span style="color: #0066CC;">e</span>.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">contentHeight</span> <span style="color: #66cc66;">&#41;</span>;
                        <span style="color: #000000; font-weight: bold;">var</span> newY:<span style="color: #0066CC;">Number</span> = <span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">round</span><span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#40;</span>mxh - imgHeight<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">/</span> <span style="color: #cc66cc;">2</span> <span style="color: #66cc66;">&#41;</span>;
                        <span style="color: #0066CC;">e</span>.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">x</span> = <span style="color: #cc66cc;">0</span>;
                        <span style="color: #0066CC;">e</span>.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">y</span> = newY;
                    <span style="color: #66cc66;">&#125;</span>
                    <span style="color: #b1b100;">else</span>
                    <span style="color: #66cc66;">&#123;</span>
                        <span style="color: #808080; font-style: italic;">// will max out the height</span>
                        <span style="color: #0066CC;">e</span>.<span style="color: #0066CC;">target</span>.<span style="color: #0066CC;">height</span> = mxh;
                        <span style="color: #000000; font-weight: bold;">var</span> imgWidth:<span style="color: #0066CC;">Number</span> = <span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">round</span><span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#40;</span>mxh <span style="color: #66cc66;">/</span> <span style="color: #0066CC;">e</span>.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">contentHeight</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">*</span> <span style="color: #0066CC;">e</span>.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">contentWidth</span> <span style="color: #66cc66;">&#41;</span>;
                        <span style="color: #000000; font-weight: bold;">var</span> newX:<span style="color: #0066CC;">Number</span> = <span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">round</span><span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#40;</span>mxw - imgWidth<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">/</span> <span style="color: #cc66cc;">2</span> <span style="color: #66cc66;">&#41;</span>;
                        <span style="color: #0066CC;">e</span>.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">x</span> = newX;
                        <span style="color: #0066CC;">e</span>.<span style="color: #0066CC;">target</span>.<span style="color: #006600;">y</span> = <span style="color: #cc66cc;">0</span>;
                    <span style="color: #66cc66;">&#125;</span>
                <span style="color: #66cc66;">&#125;</span>
              <span style="color: #66cc66;">&#125;</span>
         <span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&gt;</span>
    <span style="color: #66cc66;">&lt;/</span>mx<span style="color: #66cc66;">&gt;</span>
&nbsp;
&nbsp;
      <span style="color: #66cc66;">&lt;</span>mx :Canvas <span style="color: #0066CC;">width</span>=<span style="color: #ff0000;">&quot;500&quot;</span> <span style="color: #0066CC;">height</span>=<span style="color: #ff0000;">&quot;250&quot;</span>
            verticalScrollPolicy=<span style="color: #ff0000;">&quot;off&quot;</span> horizontalScrollPolicy=<span style="color: #ff0000;">&quot;off&quot;</span> 
            <span style="color: #0066CC;">backgroundColor</span>=<span style="color: #ff0000;">&quot;#000000&quot;</span><span style="color: #66cc66;">&gt;</span>
&nbsp;
            <span style="color: #66cc66;">&lt;</span>mx :Image id=<span style="color: #ff0000;">&quot;theimage&quot;</span>
                maintainAspectRatio=<span style="color: #ff0000;">&quot;true&quot;</span>
		scaleContent=<span style="color: #ff0000;">&quot;true&quot;</span>
                complete=<span style="color: #ff0000;">&quot;onImageComplete(event)&quot;</span> <span style="color: #66cc66;">/&gt;</span>
&nbsp;
        <span style="color: #66cc66;">&lt;/</span>mx<span style="color: #66cc66;">&gt;</span></pre></td></tr></table></div>

<p><!-- adman --></p>


<p>Related posts:<ol><li><a href='http://blog.another-d-mention.ro/programming/right-click-and-custom-context-menu-in-flash-flex/' rel='bookmark' title='Permanent Link: Right click and custom context menu in Flash/Flex'>Right click and custom context menu in Flash/Flex</a></li>
<li><a href='http://blog.another-d-mention.ro/programming/create-professional-flex-components/' rel='bookmark' title='Permanent Link: Create professional Flex components'>Create professional Flex components</a></li>
<li><a href='http://blog.another-d-mention.ro/programming/how-to-clone-duplicate-an-object-in-actionscript-3/' rel='bookmark' title='Permanent Link: How to clone (duplicate) an object in ActionScript 3'>How to clone (duplicate) an object in ActionScript 3</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.another-d-mention.ro/programming/how-to-center-a-image-on-a-canvas-in-flex/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>
