AS3中本身并没有提供绘制扇形的的方法,但是可以利用curveTo()来间接的完成这一任务。curveTo()绘制的曲线是接近Bezier曲线的曲线,并不是标准的圆弧,所以如果对精确度要求过高并不合适。
为了写这个类,努力地去回忆了下高中几何知识,再借助万能的Google才拼出了下面这张图(相信你一看就懂),看大图。

看看demo~
Sector.as 源码(提供了一个reDraw方法,重新传递半径、起始角度和角度clear后重新绘制):
import flash.display.Sprite;
//Description:draw a sector by curveTo()
//Email:wondger[at]gmail.com
//Blog:http://omiga.org/
//Date:2010-08
public class Sector extends Sprite{
private var _x0:Number; //圆心横坐标
private var _y0:Number; //圆心纵坐标
private var _r:Number; //圆半径
private var _a0:Number; //起始角度 0度开始顺时针方向
private var _lineWidth:Number; //线条宽度
private var _lineColor:Number; //线条颜色
private var _fillColor:Number; //填充颜色
public function Sector(x0:Number,y0:Number,r:Number,a0:Number,a:Number,lineWidth:Number=1,lineColor:Number=0xFF0000,fillColor:Number=0xFFFF00){
_x0 = x0;
_y0 = y0;
_r = r;
_a0 = a0*Math.PI/180;
_lineWidth = lineWidth;
_lineColor = lineColor;
_fillColor = fillColor;
if(a>0&&a<=360) drawSector(a);
}
private function drawSector(a:Number):void{
this.graphics.lineStyle(_lineWidth,_lineColor);
this.graphics.beginFill(_fillColor);
this.graphics.moveTo(_x0,_y0);
this.graphics.lineTo(_x0+_r*Math.cos(_a0),_y0+_r*Math.sin(_a0)); //曲线绘制起始点
var n:uint = Math.floor(a/45); //分段绘制接近Bezier曲线的曲线,分段越细,曲线越接近真实圆弧线
var a0:Number = _a0; //记录初始角度
while(n-->0){
a0+=Math.PI/4;
this.graphics.curveTo(_x0+_r/Math.cos(Math.PI/8)*Math.cos(a0-Math.PI/8),_y0+_r/Math.cos(Math.PI/8)*Math.sin(a0-Math.PI/8),_x0+_r*Math.cos(a0),_y0+_r*Math.sin(a0));
}
if(a%45){
var am:Number = a%45*Math.PI/180;
this.graphics.curveTo(_x0+_r/Math.cos(am/2)*Math.cos(a0+am/2),_y0+_r/Math.cos(am/2)*Math.sin(a0+am/2),_x0+_r*Math.cos(a0+am),_y0+_r*Math.sin(a0+am));
}
this.graphics.lineTo(_x0,_y0);
this.graphics.endFill();
}
public function reDraw(r:Number,a0:Number,a:Number):void{
if(a>0&&a<=360){
_r = r;
_a0 = a0*Math.PI/180;
this.graphics.clear();
drawSector(a);
}
}
}
说object?说啥呢?先简单说下object历史。Long long ago……为了实现将大量不需要在服务端的运算转移到到客户端,NetScape(NS)率先率先实现了对Java applet的支持。当时如日中天的微软当然不甘落后,而且微软觉得自己可以更NB一点,于是自己重新开发了ActiveX以替代Java applet。众所周知,HTML是标记性语言,任何的内容都需要标签来表示。于是NetScaple使用了<applet>标签来嵌入Java applet,IE则使用<object>标签来嵌入ActiveX。尽管在当时NS具有绝对优势的市场份额,而IE因与windows捆绑也“鸡犬升天”,一步步蚕食着NS的市场,双方为了争夺更多的用户,NS在随后的版本中也实现了对<object>的支持,当然仅仅是实现了对<object>标签的支持,而不是ActiveX;而IE则也开始支持<applet>和<embed>标签。
后来HTML4提出了一个概念-inclusions(包含对象),Java applet、ActiveX均是inclusions,也包括.png、.gif等图像文件,.avi等视频文件。同时标准建议使用<object>标签来嵌入inclusions。主流浏览器也开始提供对<object>更为良好的支持,但是在实现上还是存在一些差异。比如IE始终将<object>嵌入的对象作为ActiveX来处理。
那么如何使用<object>来嵌入对象?举一个大家都很熟悉的嵌入flash的例子。以下三段代码均能在现代主流浏览器中得到正确地解析而将flash嵌入到页面中。
<embed src="temp.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="200" height="200"></embed>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="200" height="200">
<param name="movie" value="temp.swf" />
<param name="quality" value="high" />
</object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="200" height="200">
<param name="movie" value="temp.swf" />
<param name="quality" value="high" />
<embed src="temp.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="200" height="200"></embed>
</object>
正如前面所说,由于历史原因,最初对嵌入对象的实现方式不尽相同,但到今天个主浏览器对嵌入对象方式都具有了较好的兼容性。不论是使用<embed>,还是<object>都能在页面中嵌入对象。第三段代码是Dreamweaver中插入flash使用的代码,这段代码更好地解决了浏览器兼容性的问题,包括一些老版本浏览器。当浏览器不支持<object>标签时,会解析<object>中除<param>外的其他标签,所以第三段代码较之第一、二段代码具有更好的兼容性。
关于<object>中相关属性的介绍就不在此赘述了,大家可参考其他一些资料都有详细介绍。在此提醒两处需要注意的地方:
- 在使用<object>嵌入对象的时候,需要为<object>设置id属性,否则IE会报错
- 使用兼容方式嵌入对象的时候,对象的获取存在差异。标准的方法是用下面函数即可获取到对象
function getSwfMovie(movieName){
if(navigator.appName.indexOf("Microsoft")!=-1) return window[movieName];
else return document[movieName];
}
但是该方法在Firefox中无法获取到对象,而是需要通过获取<embed>来完成
function getSwfMovie(movieName){
if(navigator.appName.indexOf("Microsoft")!=-1) return window[movieName];
else return document[movieName].getElementsByTagName("embed")[0];
}
ExternalInterface是一个外部的用于实现Actionscript和Flash Player容器之间通信的应用程序接口(诸如AS与JS的通信)。推荐对所有 JavaScript 与 ActionScript 之间的通信使用 ExternalInterface,替代较旧的fscommand(),getURL()方法。
ExternalInterface类有两个公共属性:
- available : Boolean [static][read-only] 指示此播放器是否位于提供外部接口的容器中。
- objectID : String [static][read-only] 在 Internet Explorer 中,返回标签的 id 属性;在 Netscape 中,返回 name 属性。
同时具有两个公共方法:
- addCallback(functionName:String, closure:Function):void [static] 将 ActionScript 方法注册为可从容器调用。
- call(functionName:String, … arguments):* [static] 调用由 Flash Player 容器公开的函数,不传递参数或传递多个参数。
ActionScript调用JavaScript demo
AS:
import flash.events.MouseEvent;
import flash.external.ExternalInterface;
bt.addEventListener(MouseEvent.MOUSE_UP,alert);
function alert(e:MouseEvent):void{
ExternalInterface.call("alert","a demo for call \n http://omiga.org");
}
直接调用即可,当然,最好检查一下当前容器是否支持外部接口通信。
bt.addEventListener(MouseEvent.MOUSE_UP,alert);
function alert(e:MouseEvent):void{
if(ExternalInterface.available){
ExternalInterface.call("alert","a demo for call \n http://omiga.org");
}
}
JavaScript调用ActionScript demo
AS:
import flash.external.ExternalInterface;
function setText(s){
i_txt.text = s;
}
ExternalInterface.addCallback("setText",setText);
HTML:
<object id="mySWF" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="300" height="22">
<param name="movie" value="addCallback.swf" />
<param name="quality" value="high" />
<param name="allowScriptAccess" value="always" />
<embed src="addCallback.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="300" height="22"></embed>
</object>
<button onclick="set()">设 置</button>
<script type="text/javascript">
function getFlash(id){
if(document.all) return document.getElementById(id);
else return document.getElementById(id).getElementsByTagName("embed")[0];
}
function set(){
var s = prompt('请输入:');
getFlash("mySWF").setText(s);
}
</script>
WP的一款播放器插件,界面和CoolPlayer很相似呢~···但是需要加载的文件明显比CoolPlayer少,也要小~··· BTW:原来它们都用的JW FLV MEDIA PLAYER~···汗~···这个播放器本来就支持很多媒体格式,或许作者只是改装成WP plugin而已~···囧~
WP的插件虽然很丰富,但是多了,必然影响网站的加载时间,所以插件的使用也应有所选择~··· Flasher Video Player相对于CoolPlayer来说功能上要逊色不少,但是基本上可以满足正常需求咯~···所以说如果你对网站的访问速度要求不那么苛刻的话,CoolPlayer是很好的选择~
Flash Video Player Player Plugin for WordPress 下载地址
安装后发表的时候嵌入下面的代码便可使用~注意文件名后面留空格,否则会出错~
[flashvideo filename=videos/my-video.flv /]
OK,测试下~《青花瓷》~
[flashvideo filename=http://omiga.org/music/青花瓷.mp3 /]