简单的椭圆效果

3 篇文章 0 订阅


const {ccclass, property} = cc._decorator;

let NodeItems = new Array();

@ccclass
export default class EffectOval extends cc.Component {
    // LIFE-CYCLE CALLBACKS:

    @property(cc.Node)
    NodeItem : cc.Node;

    /** 轴长a */
    @property
    a : number = 100;

    /** 轴长b */
    @property
    b : number = 200;

    onLoad () {
        this.NodeItem.active = false;
    }

    start () {
        this.DrawOval();
    }

    /**
     * 获取椭圆上的坐标
     *
     * @param {*} angle
     * @returns
     * @memberof EffectOval
     */
    GetOvalPosition(angle){
        if(angle >= 360){
            angle -= 360;
        }
        console.log("angle",angle);
        let pos = cc.v2(0,0);
        let tan = Math.tan(angle * 3.1415926 / 180);
        pos.x = Math.sqrt(1.0/((1.0/Math.pow(tan,2))*(1.0/Math.pow(this.a,2))+(1.0/Math.pow(this.b,2))));
        pos.y = Math.sqrt(1.0/(1.0/(Math.pow(this.a,2))+Math.pow(tan,2)*(1.0/Math.pow(this.b,2))));

        if (angle < 90 || angle > 270){
            pos.y = -pos.y;
        }
        if (angle > 180){
            pos.x = -pos.x;
        }
        return pos;
    }

    /**
     * 画椭圆
     *
     * @memberof EffectOval
     */
    DrawOval(){
        for(let i = 0;i < 360;){
            let item = cc.instantiate(this.NodeItem);
            item.active = true;
            this.node.addChild(item);
            item.position = this.GetOvalPosition(i);
            let data = {
                item : item,
                angle :i
            }
            NodeItems.push(data);

            i += 20;
        }
    }

    update (dt) {
        for(let i = 0;i < NodeItems.length;++i){
            NodeItems[i].angle += dt * 10;
            NodeItems[i].item.position = this.GetOvalPosition(NodeItems[i].angle);
        }
    }
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值