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, 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;
  }

依然存在的问题：旋转后的文体不是很平滑