[]【分享】圆形进度条上图片跟随进度并旋转角度

//首先是加载资源

Laya.loader.load(atlas, Handler.create(this, this.onLoaded), Handler.create(this, this.onLoading, null, false));

 

/**

* 加载资源进度

* @param percent 百分比

*/

private onLoading(percent: number): void {

    this.view.box_mark.graphics.drawPie(216, 216, 216, -90, (-90 + Math.floor(percent * 360)), "#ff0000"); //画进度

    let point: { x: number, y: number, hudu: number } = this.cal(216, 216, 205, Math.abs(Math.floor(percent * 360) ) - 90);     //现在是顺时针，如果逆时针旋转 Math.abs(Math.floor(percent * 360) -360)

    this.view.img_light.x = point.x;

    this.view.img_light.y = point.y;

    this.view.img_light.rotation = 90 + point.hudu;

    this.view.img_light.visible = 90 + point.hudu > 0 && point.hudu<350

}

/**

* 计算圆周长上的坐标点

* @param x0 原点X轴坐标

* @param y0 原点Y轴坐标

* @param r 半径

* @param a 旋转角度

*/

private cal(x0, y0, r, a): { x: number, y: number, hudu: number } {

    let hudu = a * 3.14 / 180;

    let x1 = Math.round(x0 + r * Math.cos(hudu));

    let y1 = Math.round(y0 + r * Math.sin(hudu));

    console.log("Point :x=", x1, "y=", y1,"hudu=",a);

    return { x: x1, y: y1, hudu: a };

}