您的位置:首页 > 其它

graphic绘制闭合曲线问题,以及绘制环形图形

2016-05-17 19:31 519 查看
graphic绘制超过180度的闭合图形时,当有控件与其发生重叠,其闭合区间会发生变化,变成闭合图形减去重叠的部分,所以绘制大于180度的闭合图形时,要分两步绘制。充分利用余角,正弦,余弦


        //画圆环进度条

        public static drawRingProBar(shape: egret.Shape,angle: number,radius: number,color?:number): void {

            if(shape && angle > 0) {

                var coangle = Math.PI / 2 - angle;

                var bigGap: number = 5;

                var smallgap: number = 25;

                var bigRadius: number = radius + bigGap;

                var smallRadis: number = radius - smallgap;

                var beginAngle: number = -Math.PI / 2;

                var endAngle: number = angle - Math.PI / 2;

                var halfAngle:number = Math.PI /2;

                var color = color ? color : 0xFED655;

                shape.graphics.clear();

                shape.graphics.lineStyle(3,color);

                shape.graphics.beginFill(color,1);

                if(angle <= Math.PI){

                    shape.graphics.moveTo(radius,smallgap);

                    shape.graphics.lineTo(radius,-bigGap);

                    shape.graphics.drawArc(radius,radius,bigRadius,beginAngle,endAngle,false);

                    shape.graphics.lineTo(Math.cos(coangle) * smallRadis + radius,radius - Math.sin(coangle) * smallRadis);

                    shape.graphics.drawArc(radius,radius,smallRadis,endAngle,beginAngle,true);   

                }else{

                    shape.graphics.moveTo(radius,smallgap);

                    shape.graphics.lineTo(radius,-bigGap);

                    shape.graphics.drawArc(radius,radius,bigRadius,beginAngle,halfAngle,false);

                    shape.graphics.lineTo(radius,radius*2);

                    shape.graphics.drawArc(radius,radius,smallRadis,halfAngle,beginAngle,true);    

                

                    shape.graphics.moveTo(radius,radius*2-smallgap);

                    shape.graphics.lineTo(radius,radius * 2+bigGap);

                    shape.graphics.drawArc(radius,radius,bigRadius,halfAngle,endAngle,false);

                    shape.graphics.lineTo(Math.cos(coangle) * smallRadis + radius,radius - Math.sin(coangle) * smallRadis);

                    shape.graphics.drawArc(radius,radius,smallRadis,endAngle,halfAngle,true); 

                }

                shape.graphics.endFill();

            }

        }

        //画扇形

        public static drawFanChart(shape: egret.Shape,angle: number,radius: number,color?: number):void{

            if(shape && angle > 0) {

                var coangle = Math.PI / 2 - angle;

                var bigGap: number = 5;

                var smallgap: number = 25;

                var bigRadius: number = radius + bigGap;

                var smallRadis: number = radius - smallgap;

                var beginAngle: number = -Math.PI / 2;

                var endAngle: number = angle - Math.PI / 2;

                var halfAngle: number = Math.PI / 2;

                var color = color ? color : 0xFED655;

                shape.graphics.clear();

                shape.graphics.lineStyle(3,color);

                shape.graphics.beginFill(color,1);

                if(angle <= Math.PI){

                    shape.graphics.moveTo(radius,radius);

                    shape.graphics.lineTo(radius,-bigGap);

                    shape.graphics.drawArc(radius,radius,bigRadius,beginAngle,endAngle,false);

                    shape.graphics.lineTo(radius,radius);

                }

                else{

                    shape.graphics.moveTo(radius,radius);

                    shape.graphics.lineTo(radius,-bigGap);

                    shape.graphics.drawArc(radius,radius,bigRadius,beginAngle,halfAngle,false);

                    shape.graphics.lineTo(radius,radius);

                    

                    shape.graphics.moveTo(radius,radius);

                    shape.graphics.lineTo(radius,radius*2+bigGap);

                    shape.graphics.drawArc(radius,radius,bigRadius,halfAngle,endAngle,false);

                    shape.graphics.lineTo(radius,radius);

                }

                shape.graphics.endFill();   

            }

        }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  图形 控件