<?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>FoxLing - 前端开发 &#187; ScaleBitmap</title>
	<atom:link href="http://foxling.org/tag/scalebitmap/feed/" rel="self" type="application/rss+xml" />
	<link>http://foxling.org</link>
	<description>不积跬步 无以至千里</description>
	<lastBuildDate>Sat, 19 Nov 2011 16:29:12 +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>Flash里的9切片缩放，以及图片缩放类</title>
		<link>http://foxling.org/as-flex-air/scale9-flash-as3-and-scalebitmap-class/</link>
		<comments>http://foxling.org/as-flex-air/scale9-flash-as3-and-scalebitmap-class/#comments</comments>
		<pubDate>Mon, 09 Mar 2009 16:26:47 +0000</pubDate>
		<dc:creator>FoxLing</dc:creator>
				<category><![CDATA[AS/Flex/AIR]]></category>
		<category><![CDATA[9切片]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[ScaleBitmap]]></category>

		<guid isPermaLink="false">http://wp.foxling.cn/as-flex-air/scale9-flash-as3-and-scalebitmap-class/</guid>
		<description><![CDATA[CSS里有滑动门技术，使标签宽度自适应。 Flash里也有9切片缩放的选项，让圆角矩形在缩放时不会变形。普通的没有应用9切片的元件在进行了拉伸后会变形，见下图： Flash里的9切片 通过设置9切片缩放，可以解决这个问题，在库里面，右击元件，选择属性，勾选启用9切片缩放比例辅助线(只有影片剪辑才可以应用9切片属性)： 双击库面板里的元件打开编辑，在舞台上可以看到出现了9切片的辅助线，鼠标拖动辅助线调整好位置： 再看看舞台上原来那个进行拉伸的元件，现在不管如何拉伸变形，圆角都能保持原样不变形： AS3里的9切片 同样，在AS3中通过设置scale9Grid也可以应用9切片缩放 scale9Grid 属性 scale9Grid:Rectangle [读写] 语言版本:ActionScript 3.0 运行时版本:AIR 1.0 Flash Player 9 当前有效的缩放网格。如果设置为 null，则在应用任何缩放转换时，将正常缩放整个显示对象。 当定义 scale9Grid 属性时，该显示对象被分割到以 scale9Grid 矩形为基础的具有九个区域的网格中，该矩形定义网格的中心区域。网格的其它八个区域如下： 矩形外的左上角 矩形上方的区域 矩形外的右上角 矩形左侧的区域 矩形右侧的区域 矩形外的左下角 矩形下方的区域 矩形外的右下角 可以认为中心区域（由矩形定义）之外的八个区域类似于在缩放时已应用特殊规则的图片帧。 在设置 scale9Grid 属性并缩放显示对象后，会正常缩放所有文本和渐变；但是，对于对象的其它类型，将应用以下规则： 正常缩放中心区域中的内容。 不缩放转角中的内容。 仅水平缩放顶部和底部区域中的内容。仅垂直缩放左侧和右侧区域中的内容。 拉伸所有填充（包括位图、视频和渐变）以适应其形状。 如果旋转显示对象，则所有后续缩放都是正常的（并会忽略 scale9Grid 属性）。 Flash演示如下： 源代码： package { import flash.display.Shape; import flash.display.Sprite; import flash.events.MouseEvent; [...]]]></description>
			<content:encoded><![CDATA[<p>CSS里有滑动门技术，使标签宽度自适应。</p>
<p>Flash里也有9切片缩放的选项，让圆角矩形在缩放时不会变形。普通的没有应用9切片的元件在进行了拉伸后会变形，见下图：</p>
<p style="text-align: center;"><img alt="" src="http://www.foxling.cn/attachments/month_0903/0200939232353.png" /></p>
<h3>Flash里的9切片</h3>
<p>通过设置9切片缩放，可以解决这个问题，在库里面，右击元件，选择属性，勾选启用9切片缩放比例辅助线(只有影片剪辑才可以应用9切片属性)：</p>
<p style="text-align: center;"><img alt="" src="http://www.foxling.cn/attachments/month_0903/n20093923264.png" /></p>
<p>双击库面板里的元件打开编辑，在舞台上可以看到出现了9切片的辅助线，鼠标拖动辅助线调整好位置：</p>
<p style="text-align: center;"><img src="http://www.foxling.cn/attachments/month_0903/y200939232911.png" alt="" /></p>
<p>再看看舞台上原来那个进行拉伸的元件，现在不管如何拉伸变形，圆角都能保持原样不变形：</p>
<p style="text-align: center;"><img src="http://www.foxling.cn/attachments/month_0903/a200939233126.png" alt="" /></p>
<p><span id="more-82"></span></p>
<h3>AS3里的9切片</h3>
<p>同样，在AS3中通过设置scale9Grid也可以应用9切片缩放</p>
<blockquote>
<p><strong>scale9Grid 属性</strong></p>
<p><code>scale9Grid:Rectangle</code> [读写]</p>
<p>语言版本:ActionScript 3.0</p>
<p>运行时版本:AIR 1.0 Flash Player 9</p>
<p>当前有效的缩放网格。如果设置为 <code>null</code>，则在应用任何缩放转换时，将正常缩放整个显示对象。</p>
<p>当定义 <code>scale9Grid</code> 属性时，该显示对象被分割到以 <code>scale9Grid</code> 矩形为基础的具有九个区域的网格中，该矩形定义网格的中心区域。网格的其它八个区域如下：</p>
<ul>
<li>矩形外的左上角</li>
<li>矩形上方的区域</li>
<li>矩形外的右上角</li>
<li>矩形左侧的区域</li>
<li>矩形右侧的区域</li>
<li>矩形外的左下角</li>
<li>矩形下方的区域</li>
<li>矩形外的右下角</li>
</ul>
<p>可以认为中心区域（由矩形定义）之外的八个区域类似于在缩放时已应用特殊规则的图片帧。</p>
<p>在设置 <code>scale9Grid</code> 属性并缩放显示对象后，会正常缩放所有文本和渐变；但是，对于对象的其它类型，将应用以下规则：</p>
<ul>
<li>正常缩放中心区域中的内容。</li>
<li>不缩放转角中的内容。</li>
<li>仅水平缩放顶部和底部区域中的内容。仅垂直缩放左侧和右侧区域中的内容。</li>
<li>拉伸所有填充（包括位图、视频和渐变）以适应其形状。</li>
</ul>
<p>如果旋转显示对象，则所有后续缩放都是正常的（并会忽略 <code>scale9Grid</code> 属性）。</p>
</blockquote>
<p><strong>Flash演示如下：</strong></p>
<p style="text-align: center;"><embed height="400" width="550" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="/examples/as3/Slice9Example/Slice9Example.swf" play="true" loop="true" menu="true"></embed></p>
<p>源代码：</p>
<pre>
package {
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.geom.Rectangle;

    public class Slice9Example extends Sprite
    {
        private var rect:Shape = new Shape();
        public function Slice9Example()
        {
            draw();
            rect.x = 0;
            rect.y = 0;
            addChild(rect);
            stage.addEventListener(MouseEvent.MOUSE_MOVE,onReSize);
        }

        private function onReSize(e:MouseEvent):void
        {
            rect.width = e.stageX;
            rect.height = e.stageY;
        }

        private function draw():void
        {
            var grid:Rectangle = new Rectangle(20,20,40,40);

            with(rect.graphics)
            {
                beginFill(0x990065,1);
                drawRoundRect(0,0,80,80,10);
                endFill();
            }
            rect.scale9Grid = grid;
        }
}
</pre>
<p>除了应用于圆角外，还可以举一反三地应用于其它不规则形状的情况。</p>
<h3>图片缩放类</h3>
<p>9切片只能应用于Flash里的元素，搞不定导入的PNG，JPG图片的，但有强人写好了类，针对图片的9切片缩放，通过转换图片为bitmap，然后进行处理；效果：</p>
<p style="text-align: center;"><img alt="" src="http://www.foxling.cn/attachments/month_0903/g200931002249.png" /></p>
<p>原博客地址：<a href="http://www.bytearray.org/?p=118" target="_blank">http://www.bytearray.org/?p=118</a></p>
]]></content:encoded>
			<wfw:commentRss>http://foxling.org/as-flex-air/scale9-flash-as3-and-scalebitmap-class/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

