omiga

简单就好

AS3绘制扇形

3条评论»

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);
    }
  }
}

纯更新!

6条评论»

WP3.0这个后台煞白煞白的,晚上很闪眼睛!

博客放在这两三年了,最近一年多很少来更新。但是基本上天天都会看看,也不清楚看什么。尽量保证每个月有更新,不管什么内容,记录下就行,积少成多!

这个月项目不少,晚上加过几次班,都到10点后。谈不上充实有意义,只是没有闲着蛋疼!

刚看完《高性能网站建设—进阶指南》,挺不错,还是有些收获。《影响力》也正在看,挺有意思的一本书。

月初搬家到离公司几分钟路程的地方,现在每天8:40左右起床到公司都算早。这片小区比较无聊,晚上10后出去晃悠,都看不到啥人,不比以前。

最近身边朋友啥的,离职、跳槽、回家的不少,不论如何选择,希望都能一切如意!

<object>

1条评论»

说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>中相关属性的介绍就不在此赘述了,大家可参考其他一些资料都有详细介绍。在此提醒两处需要注意的地方:

  1. 在使用<object>嵌入对象的时候,需要为<object>设置id属性,否则IE会报错
  2. 使用兼容方式嵌入对象的时候,对象的获取存在差异。标准的方法是用下面函数即可获取到对象
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];
}

Adobe Flash Player—Debugger Versions

2条评论»

replace (searchValue, replaceValue)

3条评论»

字符串对象的replace方法作查找替换操作非常好用。

语 法
stringObject.replace(regexp,replacement)

regexp – 必需。规定了要替换的模式的 RegExp 对象。请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象。

replacement – 必需。一个字符串值。规定了替换文本或生成替换文本的函数。

简单使用:

var s = 'he is a god girl!';
var pattern = /he/g;
alert(s.replace(pattern,"she"));

稍微复杂一点的使用:(回溯引用)

var s = 'i like GFW';
var pattern = /(GFW)/g;
alert(s.replace(pattern,"the great $1"));

当传入的替换文本参数为字符串时它还接受第三个参数

var str = "Apples are round, and apples are juicy.";
alert(str.replace("apples", "oranges", "gi"));

其实,这些都不是我想说的,我想说replacement为函数的情况。

ECMAScript v3 规定,replace() 方法的参数 replacement 可以是函数而不是字符串。在这种情况下,每个匹配都调用该函数,它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来的参数 是与模式中的子表达式匹配的字符串,可以有 0 个或多个这样的参数。接下来的参数是一个整数,声明了匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。

根据以上说明,replace()可以通过为替换函数传入参数完成一些更为复杂的功能。

如将所有单词首字母转换成大写:

var s = "the great gFW";
var pattern = /\b\w+\b/g;
alert(s.replace(pattern,function(w){return w.substring(0,1).toUpperCase()+w.substring(1)}))

多传几个参数试试:

var s = "AAAbbbZZZ AAAcccZZZ AAAdddZZZ AAAeeeZZZ hijklmnopqrstuvwxy";
var pattern = /\b(AAA)(\w+)(ZZZ)\b/g;
alert(s.replace(pattern,function(w,w1,w2,w3,i){return i+w1+w2+w3+i}));

就这样了?可以继续传入参数吗?再试:

var s = "AAAbbbZZZ AAAcccZZZ AAAdddZZZ AAAeeeZZZ hijklmnopqrstuvwxy";
var pattern = /\b(AAA)(\w+)(ZZZ)\b/g;
s.replace(pattern,function(w,w1,w2,w3,i,x){alert(x)});

居然还有~···不过这个值从何而来我也迷惑了~···还可以传参数吗?再试!的确不可以了。

函数中第一个参数是匹配模式的字符串,接下来的参数是匹配模式中子表达式的字符串,数量与子表达式个数一致。当所有模式匹配参数都传递完后,后一个参数为匹配在字符串中出现的位置。根据这个特性可以发散出很多高级的应用。