flex 实现报表中的斜线表头

???

???????????? 图1?????????????????????????????????????????????????????????????????????? 图2????????????????????????????????????????????????????? 图3

?

<com:ObliqueLine? width="500" height="300" label="时间|产品|产量|地区|...|...|..."/>

?

制作这样的表头，需要了解以下知识：

1 ） 使用graphics绘制斜线

2 ） Math函数中的tan sin 等几何函数，以及（角度 = 弧度*180/PI）

??????? 例如图一的（时间）角度计算为Math.atan2(this.height,this.width) * 180.0 / Math.PI

3 ） 使用BitmapData的方式将TextField 旋转指定度数

?public function getBiasText(text:String):Shape
??{
???var s:Shape=new Shape;
???var t:TextField=new TextField;
???t.text=text;
???var f:TextFormat=new TextFormat;
???f.size=20;
???t.setTextFormat(f);
???var b:BitmapData=new BitmapData(t.width,t.height,true,null);
???b.draw(t);
???s.graphics.clear();
???s.graphics.beginBitmapFill(b);
???s.graphics.drawRect(0,t.textWidth,t.textHeight);
???s.graphics.endFill();
???textWidth = s.width;
???textHeight = s.height;
???//s.rotation=20;
???return s;
??}

备注：如何解决文字的位置不会压在斜线上呢？基本原理就是通过几何运算，计算出x坐标，y坐标以及旋转的角度

??/** ?? * 设置倾斜的文本 ?? * @param index 文本的下标 ?? * @param firstAngle 当前扇形区域的角度 ?? * @param secendAngle 当前扇形区域以及之前的区域的角度和 ?? * @param zoneType 区域的类型 ?? * @param isCenter 是否旋转居中 ?? */ ??private function biasText(index:int,firstAngle:Number,secondAngle:Number,zoneType:int,isCenter:Boolean):void ??{ ???var d5:Number=(firstAngle + secondAngle) / 2.0; ???var d1:Number; ???var d2:Number ???var label:Shape=labelObjects[index] as Shape; ???switch(zoneType){ ????case 1:{ ?????d1 = textHeight/Math.tan(secondAngle/ 180.0 * Math.PI); ?????d2 = 0; ?????break; ????} ????case 2:{ ?????if(isCenter){ ??????var t:Number = textHeight/2/Math.sin((secondAngle-firstAngle)/2/180.0 * Math.PI); ??????var d1 = t*Math.cos((firstAngle)/180.0 * Math.PI); ??????var d2 = t * Math.sin((firstAngle)/180.0 * Math.PI); ?????}else{ ??????d2 = this.height-label.height; ??????d1 = 0; ?????} ?????break; ????} ????case 3:{ ?????var t:Number = textHeight/2/Math.sin((secondAngle-firstAngle)/2/180.0 * Math.PI); ?????var d1 = t*Math.cos(firstAngle/180.0 * Math.PI); ?????var d2 = t * Math.sin(firstAngle/180.0 * Math.PI); ????} ???} ???if(isCenter &&? redraw){ ????label.rotation+=d5; ???} ???label.x=d1; ???label.y=d2; ??}