TeeChart Pro VCL/FMX教程（十三）：圖表面板上的自定義繪圖

    TeeChart Pro VCL/FMX是一款主流的圖表制作工具。提供了數(shù)百種用于可視化的2D、3D圖形樣式、56種數(shù)學(xué)、統(tǒng)計和金融函數(shù)，以及不限數(shù)量的坐標(biāo)軸和30種調(diào)色板組件。TeeChart Pro VCL/FMX教程將會以連載的形式持續(xù)為大家?guī)鞹eeChart Pro VCL/FMX的使用方法。 

點擊下載TeeChart Pro VCL/FMX最新試用版

    本篇教程為大家?guī)淼氖?a href="http://www.xiangyinys.com/product/608/download" target="_self" style="white-space: normal; color: rgb(31, 73, 125);">TeeChart Pro VCL/FMX中圖表面板上的自定義繪圖的這一節(jié)，TeeChart通過TCanvas3D組件提供廣泛的定制繪圖設(shè)施。 使用Canvas，您可以在Chart Panel/圖表面板的任何位置添加形狀，線條和文本，并定義其顏色，筆和畫筆樣式。內(nèi)容主要分為以下幾個部分：

1. TeeChart Canvas

   繪圖順序和繪圖線

   Canvas筆和畫筆

   添加2D形狀和3D形狀

   添加文本

   應(yīng)用實例

2. 高級自定義繪圖

   組件概述

TeeChart Canvas

繪畫順序

    使用TeeChart的Canvas方法時，請記住繪圖順序很重要。如果在圖表上繪制一條線，然后添加系列數(shù)據(jù)點將會導(dǎo)致線透支，您可以將線放入Series BeforeDrawValues事件中，讓線顯示在Chart網(wǎng)格上方和Series下方；您可以將線代碼放在OnAfterDraw事件中，讓線顯示在Series上方。

    在順序上有4個主要圖表繪制事件：

• OnBeforeDrawChart事件

• OnBeforeDrawAxes事件

• OnBeforeDrawSeries事件

• OnAfterDraw事件

繪畫線

    在2D圖表添加繪畫線：

//Draw a Line diagonally from top left to bottom right 
//in the Chart Area of a 2D Chart

With Chart1, ChartRect do
begin
  //Move the pointer to the top left Chart point
  Canvas.MoveTo(Left,Top);
  
  //Draw the Line
  Canvas.LineTo(Right,Bottom);
end;

    在正交三維圖表上，由于三維正交的位移問題，軸位置將會偏離圖表區(qū)域，我們可以相應(yīng)地移動線路：

//Draw a Line diagonally from top left to bottom right 
//in the Chart Area of a 3D Chart

With Chart1, ChartRect do
begin
  //Move the pointer to the top left Chart point
  Canvas.MoveTo(Left + Width3D,Top - Height3D);

  //Draw the Line + adjustment for 3D displacement
  Canvas.LineTo(Right + Width3D,Bottom - Height3D);
end;

    在3D Nativemode或OpenGL圖表上繪制相同的線條（這也適用于2D和3D正交圖表）：

//Draw a Line diagonally from top left to bottom right 
//in the Chart Area of a 3D Nativemode or OpenGL Chart
With Chart1,Canvas do
begin
  Pen.Color := clBlue;
  Pen.Width := 1;
  Pen.Style := psDot; //Pen must be 1 to use Pen.Style
  Brush.Style := bsClear; //transparency
  //Then draw the Line
  MoveTo3D(ChartRect.Left,ChartRect.Top,0);
  LineTo3D(ChartRect.Right,ChartRect.Bottom,Width3D);
end;

    MoveTo3D和LineTo3D方法識別將會由于使用完整3D應(yīng)用的Elevation和Rotation而對ChartRect進行的位移。

Canvas筆和畫筆

    上面呈現(xiàn)的線是使用在繪畫線之前繪制的最后一個對象時的筆和筆刷，那可能不是您想要的的效果，您可以自己定義：

//Define Pen and Brush before drawing the Line
With Chart1,Canvas,ChartRect do
begin
  Pen.Color := clBlue;
  Pen.Width := 1;
  Pen.Style := psDot; //Pen must be 1 to use Pen.Style
  Brush.Style := bsClear; //transparency

  //Then draw the Line
  MoveTo(Left + Width3D,Top - Height3D);
  LineTo(Right + Width3D,Bottom - Height3D);
end;

添加2D形狀和3D形狀

    以與Canvas Lines類似的方式添加2D Canvas Shapes，以下示例是在圖表區(qū)域的中心添加一個Rectangle：

2D圖表（3D正交圖表僅支持2D形狀）

With Chart1, Canvas do
begin
   //prepare Pen and Brush
   Pen.Color := clBlue;
   Pen.Width := 1;
   Pen.Style := psDot;
   Brush.Color := clWhite;
   Brush.Style := bsSolid;

   //You can draw a Rectangle on any Chart (2D or 3D)
   Rectangle(100,100,200,200);
end;

在3D圖表上，您也可以在Z平面中移動矩形。

With Chart1,Canvas,ChartRect do
begin
   //prepare Pen and Brush
   Pen.Color := clBlue;
   Pen.Width := 1;
   Pen.Style := psDot;
   Brush.Color := clWhite;
   Brush.Style := bsSolid;
   //Draw Rectangle with Z displacement
   RectangleWithZ(Rect(Left,
	               Top,
		       Left+((Right-Left) div 2),
		       Top+((Bottom-top) div 2)),
		  Width3D div 2);
end;

    可以將3D形狀添加到3D圖表中，此示例在圖表矩形的頂部左側(cè)象限中繪制多維數(shù)據(jù)集，深度覆蓋從墻壁前部到后墻的區(qū)域。

With Chart1,Canvas,ChartRect do
begin
   //prepare Pen and Brush
   Pen.Color := clBlue;
   Pen.Width := 1;
   Pen.Style := psDot;
   Brush.Color := clWhite;
   Brush.Style := bsSolid;

   Cube(Left,
        Left+((Right-Left) div 2),
        Top,
        Top+((Bottom-Top) div 2),
        0,
        Width3D,
        True);
end;

添加文本

在2D文本中，您可以將文本添加到矩形：

procedure TForm1.Button1Click(Sender: TObject);
var rectLeft,rectTop,rectRight,rectBottom:Integer;
begin
 With Chart1, Canvas, ChartRect do
 begin
    rectLeft:= Left;
    rectTop:= Top;
    rectRight:= Left + (Right - Left) div 2;
    rectBottom:= Top + (Bottom - Top) div 2;

    //prepare Pen and Brush
    Pen.Color := clBlue;
    Pen.Width := 1;
    Pen.Style := psDot;
    Brush.Color := clWhite;
    Brush.Style := bsSolid;

    //Draw the Rectangle
    Rectangle(rectLeft,rectTop,rectRight,rectBottom);

    //Modify Font
    Font.Color := clRed;

    //add the Text start at the midpoint of the Rectangle
    TextOut(rectLeft + (rectRight - rectLeft) div 2, 
            rectTop + (rectBottom-rectTop) div 2,
            'Hello');
 end;
end;

在3D文本中，您可以使用TextOut3D方法將文本放置在不同的3D平面中。

 With Chart1, Canvas, ChartRect do
 begin
   Brush.Style := bsClear;

   TextOut3D(Left, Top, Width3D div 2, 'Hello');
 end;

應(yīng)用實例

下方示例獲取Series的第3和第10個值，在它們之間繪制一條直線，并告訴我們new Lin的第一個和最后一個點的值以及它們之間的差異：

'First add some data to the empty Chart
procedure TForm1.BitBtn1Click(Sender: TObject);
begin
  Series1.FillSampleValues(20);
end;
//You could put this code in the OnAfterDraw event
procedure TForm1.Chart1AfterDraw(Sender: TObject);
begin
 With Chart1 do
 Begin
   If SeriesCount > 0 Then
   begin
     If Series1.Count > 10 Then
     begin
       //Add some Shapes
       Canvas.Pen.Color := clBlue;
       Canvas.Pen.Width := 1;
       Canvas.Pen.Style := psDot;
       Canvas.Brush.Style := bsClear;
       Canvas.MoveTo (Axes.Bottom.CalcXPosValue(Series1.XValues[3]),
                      Axes.Left.CalcYPosValue(Series1.YValues[3]));
       Canvas.LineTo (Axes.Bottom.CalcXPosValue(Series1.XValues[10]),
                      Axes.Left.CalcYPosValue(Series1.YValues[10]));
       Canvas.Brush.Style := bsSolid;
       Canvas.TextOut(Axes.Bottom.CalcXPosValue(Series1.XValues[3]),
                      Axes.Left.CalcYPosValue(Series1.YValues[3]),
                      'Point value: ' + FloatToStr(Series1.YValues[3]));
       Canvas.TextOut(Axes.Bottom.CalcXPosValue(Series1.XValues[10]),
                      Axes.Left.CalcYPosValue(Series1.YValues[10]),
                      'Point value: ' + FloatToStr(Series1.YValues[10]));
       Canvas.TextOut(Axes.Bottom.CalcXPosValue(Series1.XValues[10]),
                      Axes.Left.CalcYPosValue(Series1.YValues[10]) +
                      Canvas.TextHeight('Any letter'), 'Change is: ' +
                      FloatToStr(Series1.YValues[10] - Series1.YValues[3]));
     end;
   end;
 end;
end;

高級自定義繪圖

組件概述

    幾乎所有的TeeChart裝置現(xiàn)在都使用TeCanvas裝置，該單元是一個低級單元，提供封裝在新TCanvas3D組件中的所有繪圖功能。

    如果使用TeeChart Canvas屬性進行特殊的自定義繪圖，則應(yīng)將此單元添加到格式Uses中，使用它是安全的，因為除了普通的Delphi單元之外它沒有依賴性。

TCanvas3D類

    此Canvas派生類包含對3D旋轉(zhuǎn)，縮放，滾動和3D基元的支持。它具有虛擬和抽象的所有方法，因此意味著您無法直接使用它，您應(yīng)該使用實現(xiàn)所有方法和屬性的派生類。

    使用此Canvas，Chart組件現(xiàn)在可以支持插件畫布，也就是說，您可以在設(shè)計時或運行時更改Chart1.Canvas屬性，并且所有繪圖都將重新定向到新的Canvas：

Chart1.Canvas := TGLCanvas.Create ;   //<-- switches display to OpenGL

TeeChart包括這些新的虛擬畫布：

• TTeeCanvas3D

• TGLCanvas（用于OpenGL渲染）

    一個新的虛擬Canvas很容易實現(xiàn)，您甚至可以創(chuàng)建一個TVRMLCanvas，它將生成一個包含VRML（虛擬現(xiàn)實）圖形指令的ascii文件（或另一個保存到DXF，3DS等）。

    這些畫布適用于基類TCustomChart，因此它們適用于TChart，TDBChart，TQRChart或任何其他派生的Chart類。

注意：OpenGL DLL僅適用于32位Windows，因此也適用于GLCanvas。

TTeeCanvas3D類：

    這是內(nèi)部使用的虛擬TCanvas3D類的實現(xiàn)，它是標(biāo)準(zhǔn)Delphi TCanvas類的包裝器。它有許多直接調(diào)用Windows GDI來加速繪圖的工具，它增加了TCanvas3D的功能，如旋轉(zhuǎn)，縮放等。它適用于所有Delphi和C ++ Builder版本。

TGLCanvas類：

    此類駐留在單獨的單元/包中，以使應(yīng)用程序獨立于OpenGL的DLL，它僅適用于32位Delphi（和C ++ Builder）。當(dāng)使用TGLCanvas作為圖表時，包括使用TeeGLEditor，圖表編輯器將在運行時添加另一個頁面以更改GL特征，例如燈光位置和顏色，要使OpenGL在設(shè)計時可用，請將TTeeOpenGL組件添加到Form，將其與Chart關(guān)聯(lián)并設(shè)置為 Active：= True。

    新的非可視組件（TTeeOpenGL），允許您在設(shè)計或運行時將現(xiàn)有圖表連接到它，并立即看到使用OpenGL 3D庫所呈現(xiàn)的圖表，此組件還允許您定義OpenGL特定屬性，如Lighting屬性。

TTeeCanvas3D和TGLCanvas之間的比較：

•     OpenGL畫布支持照明（燈光，燈光顏色，位置等），而TeeCanvas使用較暗的顏色繪制3D來模擬光照。

•     OpenGL畫布不支持 metafile 創(chuàng)建，因此對于打印，應(yīng)該創(chuàng)建一個大而胖的TBitmap并將其發(fā)送到打印機Canvas，這意味著它只適用于具有良好內(nèi)存和優(yōu)良驅(qū)動程序的打印機，它無法創(chuàng)建，復(fù)制到剪貼板，保存或打印metafile。

•     OpenGL畫布需要OpenGL DLL（在Windows NT及更高版本中可用，以及www.sgi.com的替代庫）。如果您的CPU和視頻硬件良好，Silicon Graphics的OpenGL Dlls可能比Microsoft的更快。

•     OpenGL畫布支持不同的字體大小和顏色，但它不支持多種字體樣式，字體的所有字符都將轉(zhuǎn)換為繪圖指令，這占用了相當(dāng)多的內(nèi)存和CPU速度。 

   TeeChart for .NET，TeeChart for JavaScript/HTML5，TeeChart for Xamarin.Android均已加入在線訂購，現(xiàn)在搶購可立享特別優(yōu)惠?。?！

    關(guān)注慧聚IT微信公眾號???，了解產(chǎn)品的最新動態(tài)及最新資訊。