<?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>中文Flex例子 &#187; 扇形菜单</title>
	<atom:link href="http://blog.minidx.com/tag/%e6%89%87%e5%bd%a2%e8%8f%9c%e5%8d%95/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.minidx.com</link>
	<description>中文Adobe Flex例子,Flex实例教程,RIA资源,全文检索技术,算法和数据结构</description>
	<lastBuildDate>Thu, 31 Mar 2011 03:22:33 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Auzn经典作品&#8211;扇形菜单</title>
		<link>http://blog.minidx.com/2008/10/04/1472.html</link>
		<comments>http://blog.minidx.com/2008/10/04/1472.html#comments</comments>
		<pubDate>Sat, 04 Oct 2008 05:43:04 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[Adobe其他]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[扇形菜单]]></category>
		<category><![CDATA[教程]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/2008/10/04/1472.html</guid>
		<description><![CDATA[在继 auzn经典Flex教程–KingnareStyle皮肤制作简介 后 ，auzn又出品了经典作品&#8211;扇形菜单。本文英文版：Tutorials: Step by Step to Create your Sector Menu。 下面我们就来做个扇形菜单,首先来看看效果吧:
[PieMenu.swf]
只要设定好起始位置和总角度,似乎可以画出很多种组合. 
 Demo &#124; Download Full Project









这样:

这样:

或者这样:

菜单的重点是如何画空心弧及过渡动画的控制.
很明显,菜单是由多个空心弧组成的,菜单形成也就是多个空心弧的产生并进行动画过渡的过程,所以我们先从单个空心弧入手.空心弧在过渡动画中可能是在任意一个角度开始绘制,任意一个角度结束绘制,我们随意取一个状态:

上图是从-30度起始画图,画到-135度结束,空心弧角度为-105度,内圆半径50,外圆半径100,中心圆坐标(x,y).
可以看出这个图形边线由两条直线和两条弧组成,按逆时针为直线P1P2, 弧P2P3, 直线P3P4, 弧P4P1. 只要画好边线再进行填充即可.
我们先来计算四个点的坐标:
P1: (x+r*cos(start), y+r*sin(start))
P2: (x+R*cos(start), y+R*sin(start))
P3: (x+r*cos(start+angle), y+r*sin(start+angle))
P4: (x+R*cos(start+angle), y+R*sin(start+angle))
接下来的问题就是圆弧的算法了,可以知道,在圆心角小于45度的范围内是可以画出圆弧的.我们把圆弧的圆心角以小于45度为单位均分,对每个部分进行画弧,这样拼接起来就是完整的圆弧了.
目前已经有比较成熟的程序代码了.
修改了Geordi的DrawSector方法(如果知道作者及出处,请留言):
//angle为圆心角的大小,startA为起始角度
//以45度为最大角度值均分,取得可以划分数值
var n:Number = Math.ceil(Math.abs(angle) / 45);
//计算每份圆弧的圆心角(均小于45度)
var angleA:Number=angle / n;
angleA = angleA * Math.PI / 180;
startA = startA * Math.PI / 180
//循环绘制圆弧
for (var i=1; i &#60;= [...]]]></description>
		<wfw:commentRss>http://blog.minidx.com/2008/10/04/1472.html/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk
Page Caching using disk (enhanced)
Database Caching 2/10 queries in 0.603 seconds using disk
Object Caching 156/313 objects using disk

Served from: blog.minidx.com @ 2012-02-10 03:15:44 -->
