2007/11/20 | 扇形排列的色盘效果
类别(Flash学习笔记) | 评论(2) | 阅读(256) | 发表于 15:09

var r:Number = 30; // 半径
var step:Number = 20; // 步长

var sec = 72;// 扇区数目
var lev = 20;// 层数

var inner:Array = new Array(sec);
var outer:Array = new Array(sec);

createEmptyMovieClip("a_mc",0);
a_mc.lineStyle(1,0xffffff,100)
var c = 0xff00ff;

a_mc._x = 200;
a_mc._y = 200;

for (var k = 0; k < lev; k++) {
 for (var i = 0; i < sec; i++) {
  var angle = i * (360 / sec) * Math.PI / 180;
  var tx = r * Math.cos(angle);
  var ty = r * Math.sin(angle);
  inner[i] = new Array(tx, ty);

  tx = (r + step) * Math.cos(angle);
  ty = (r + step) * Math.sin(angle);
  outer[i] = new Array(tx, ty);
 }
 ;
 for (var i = 0; i < sec - 1; i++) {
  // 从内圈数组向外圈数组画线
  a_mc.beginFill(c += i * 1000,100);
  a_mc.moveTo(inner[i][0],inner[i][1]);
  a_mc.lineTo(outer[i][0],outer[i][1]);
  a_mc.lineTo(outer[i + 1][0],outer[i + 1][1]);
  a_mc.lineTo(inner[i + 1][0],inner[i + 1][1]);
  a_mc.lineTo(inner[i][0],inner[i][1]);

 }
 a_mc.beginFill(c += (sec - 1) * 1000,100);
 a_mc.moveTo(inner[sec - 1][0],inner[sec - 1][1]);
 a_mc.lineTo(outer[sec - 1][0],outer[sec - 1][1]);
 a_mc.lineTo(outer[0][0],outer[0][1]);
 a_mc.lineTo(inner[0][0],inner[0][1]);
 a_mc.lineTo(inner[sec - 1][0],inner[sec - 1][1]);
 
 r += step;
}

a_mc.endFill();

代码复制到场景中,然后运行,就可以看到一个很漂亮的色盘.

代码还可以再优化一下,角度值是固定的,所以cos函数 sin函数只要计算一次就够了,保存下来直接用就可以。坐标点也是一样,首次单独计算内环的坐标,进行循环体后只计算外环的坐标,在循环体的最后,将外环坐标“交给”内环数组,又可以少去一些数学运算,效率会高很多。

var r:Number = 30;// 半径
var step:Number = 20;// 步长

var sec = 72;// 扇区数目
var lev = 20;// 层数

var cos:Array = new Array(sec);
var sin:Array = new Array(sec);
var inner:Array = new Array(sec);
var outer:Array = new Array(sec);

for (var i = 0; i < sec; i++) {
 var angle = i * (360 / sec) * Math.PI / 180;
 cos[i] = Math.cos(angle);
 sin[i] = Math.sin(angle);
 var tx = r * cos[i];
 var ty = r * sin[i];
 inner[i] = new Array(tx, ty);
}

createEmptyMovieClip("a_mc",0);
a_mc._x = 200;
a_mc._y = 200;
a_mc.lineStyle(1,0xffffff,100);
var c = 0xff00ff;

for (var k = 0; k < lev; k++) {
 for (var i = 0; i < sec; i++) {
  tx = (r + step) * cos[i];
  ty = (r + step) * sin[i];
  outer[i] = new Array(tx, ty);
 }
 for (var i = 0; i < sec - 1; i++) {
  // 从内圈数组向外圈数组画线
  a_mc.beginFill(c += i * 1000,100);
  a_mc.moveTo(inner[i][0],inner[i][1]);
  a_mc.lineTo(outer[i][0],outer[i][1]);
  a_mc.lineTo(outer[i + 1][0],outer[i + 1][1]);
  a_mc.lineTo(inner[i + 1][0],inner[i + 1][1]);
  a_mc.lineTo(inner[i][0],inner[i][1]);

 }
 a_mc.beginFill(c += (sec - 1) * 1000,100);
 a_mc.moveTo(inner[sec - 1][0],inner[sec - 1][1]);
 a_mc.lineTo(outer[sec - 1][0],outer[sec - 1][1]);
 a_mc.lineTo(outer[0][0],outer[0][1]);
 a_mc.lineTo(inner[0][0],inner[0][1]);
 a_mc.lineTo(inner[sec - 1][0],inner[sec - 1][1]);

 for (var i = 0; i < sec; i++) {
  inner[i] = outer[i];
 }
 r += step;
}

a_mc.endFill();

如果将半径、扇区数目、步长值、层数目 这四个变量用滑块来控制,效果会更直观漂亮,回头有时间再补上这个效果演示。

0

评论Comments