egret中使用graphic和数学函数创建出好看的图案

在看书的时候，看到了这个例子，为啥可以创建这么漂亮的图案，把自己的一些理解写出来。

2.png 3.png 1.png

1、首先使用egret创建一个新的空项目

4.png

2、在Main函数内添加如下代码：class Main extends egret.DisplayObjectContainer {

public constructor() {
    super();
    this.init();
}
private text:egret.TextField;
private pen:egret.Shape;

private init()
{
    let _label:egret.TextField = new egret.TextField();
    _label.text = "请输入想要的数字: \n将会出现美丽的图案";
    _label.size = 30;
    this.addChild(_label);

    let _text:egret.TextField = new egret.TextField();
    _text.type = egret.TextFieldType.INPUT;
    _text.restrict = "0-9";
    _text.background = true;
    _text.backgroundColor = 0xff99cc;
    _text.x = 300;
    _text.width = 200;
    _text.height = 35;
    _text.size = 30;
    _text.text = "5";
    _text.addEventListener(egret.Event.CHANGE,this.onTextChangeHandler,this);
    this.addChild(_text);
    this.text = _text;

    this.pen = new egret.Shape();
    this.pen.x = 300;
    this.pen.y = 400;
    this.addChild(this.pen);
    this.pen.filters = [new egret.GlowFilter(0x00cc0c,1,80,60)];

    this.onTextChangeHandler(null);
}

private onTextChangeHandler(evt:egret.Event)
{
    let changeCount:number = Number(this.text.text);
    this.pen.graphics.clear();
    this.drawShape(this.pen ,changeCount,200);
}

private drawShape(pen:egret.Shape,n:number,r:number)
{
    pen.graphics.lineStyle(1,0x99ff99);
    let startPoint:egret.Point = this.getPoint(n,r,0);
    pen.graphics.moveTo(startPoint.x , startPoint.y);
    for(let i = 0;i<360;i++)
    {
        let nt:number = i;
        let nextPoint:egret.Point = this.getPoint(n,r,nt);
        pen.graphics.lineTo(nextPoint.x,nextPoint.y);
    }
}

private getPoint(n:number,r:number,angle:number):egret.Point
{
    let len:number = r * Math.sin(n*angle);
    let point:egret.Point = egret.Point.polar(len,angle);
    return point;
}

}

3、理解
Math.sin(n*angle)需要的参数是弧度，得到的值是-1到1之间。
egret.Point.polar(len,angle) 是将极坐标系转换成直角坐标系。len是长度，即半径，而angle是角度。

我们先将 for(let i = 0;i<360;i++)
{
let nt:number = i;中的nt 修改成这样，let nt:number = Math.PI * i /180;我们将看到所有图案的底图。其实所有的效果都是底图重复180/Math.PI，并绕中心点有微小偏移而造就的。

5.png
6.png
7.png