TeeChart Pro VCL/FMX教程（十三）：圖表面板上的自定義繪圖
TeeChart Pro VCL/FMX是一款主流的圖表制作工具。提供了數百種用于可視化的2D、3D圖形樣式、56種數學、統計和金融函數，以及不限數量的坐標軸和30種調色板組件。TeeChart Pro VCL/FMX教程將會以連載的形式持續為大家帶來TeeChart Pro VCL/FMX的使用方法。
本篇教程為大家帶來的是TeeChart Pro VCL/FMX中圖表面板上的自定義繪圖的這一節，TeeChart通過TCanvas3D組件提供廣泛的定制繪圖設施。 使用Canvas，您可以在Chart Panel/圖表面板的任何位置添加形狀，線條和文本，并定義其顏色，筆和畫筆樣式。內容主要分為以下幾個部分：
TeeChart Canvas
繪圖順序和繪圖線
Canvas筆和畫筆
添加2D形狀和3D形狀
添加文本
應用實例
高級自定義繪圖
組件概述
TeeChart Canvas
繪畫順序
使用TeeChart的Canvas方法時，請記住繪圖順序很重要。如果在圖表上繪制一條線，然后添加系列數據點將會導致線透支，您可以將線放入Series BeforeDrawValues事件中，讓線顯示在Chart網格上方和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;
在正交三維圖表上，由于三維正交的位移問題，軸位置將會偏離圖表區域，我們可以相應地移動線路：
//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應用的Elevation和Rotation而對ChartRect進行的位移。
Canvas筆和畫筆
上面呈現的線是使用在繪畫線之前繪制的最后一個對象時的筆和筆刷，那可能不是您想要的的效果，您可以自己定義：
//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，以下示例是在圖表區域的中心添加一個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圖表中，此示例在圖表矩形的頂部左側象限中繪制多維數據集，深度覆蓋從墻壁前部到后墻的區域。
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;
應用實例
下方示例獲取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裝置現在都使用TeCanvas裝置，該單元是一個低級單元，提供封裝在新TCanvas3D組件中的所有繪圖功能。
如果使用TeeChart Canvas屬性進行特殊的自定義繪圖，則應將此單元添加到格式Uses中，使用它是安全的，因為除了普通的Delphi單元之外它沒有依賴性。
TCanvas3D類
;此Canvas派生類包含對3D旋轉，縮放，滾動和3D基元的支持。它具有虛擬和抽象的所有方法，因此意味著您無法直接使用它，您應該使用實現所有方法和屬性的派生類。
使用此Canvas，Chart組件現在可以支持插件畫布，也就是說，您可以在設計時或運行時更改Chart1.Canvas屬性，并且所有繪圖都將重新定向到新的Canvas：
Chart1.Canvas := TGLCanvas.Create ; //<-- switches display to OpenGL
TeeChart包括這些新的虛擬畫布：
TTeeCanvas3D
TGLCanvas（用于OpenGL渲染）
一個新的虛擬Canvas很容易實現，您甚至可以創建一個TVRMLCanvas，它將生成一個包含VRML（虛擬現實）圖形指令的ascii文件（或另一個保存到DXF，3DS等）。
這些畫布適用于基類TCustomChart，因此它們適用于TChart，TDBChart，TQRChart或任何其他派生的Chart類。
注意：OpenGL DLL僅適用于32位Windows，因此也適用于GLCanvas。
TTeeCanvas3D類：
這是內部使用的虛擬TCanvas3D類的實現，它是標準Delphi TCanvas類的包裝器。它有許多直接調用Windows GDI來加速繪圖的工具，它增加了TCanvas3D的功能，如旋轉，縮放等。它適用于所有Delphi和C ++ Builder版本。
TGLCanvas類：
此類駐留在單獨的單元/包中，以使應用程序獨立于OpenGL的DLL，它僅適用于32位Delphi（和C ++ Builder）。當使用TGLCanvas作為圖表時，包括使用TeeGLEditor，圖表編輯器將在運行時添加另一個頁面以更改GL特征，例如燈光位置和顏色，要使OpenGL在設計時可用，請將TTeeOpenGL組件添加到Form，將其與Chart關聯并設置為 Active：= True。
新的非可視組件（TTeeOpenGL），允許您在設計或運行時將現有圖表連接到它，并立即看到使用OpenGL 3D庫所呈現的圖表，此組件還允許您定義OpenGL特定屬性，如Lighting屬性。
TTeeCanvas3D和TGLCanvas之間的比較：
OpenGL畫布支持照明（燈光，燈光顏色，位置等），而TeeCanvas使用較暗的顏色繪制3D來模擬光照。
OpenGL畫布不支持 metafile 創建，因此對于打印，應該創建一個大而胖的TBitmap并將其發送到打印機Canvas，這意味著它只適用于具有良好內存和優良驅動程序的打印機，它無法創建，復制到剪貼板，保存或打印metafile。
OpenGL畫布需要OpenGL DLL（在Windows NT及更高版本中可用，以及www.sgi.com的替代庫）。如果您的CPU和視頻硬件良好，Silicon Graphics的OpenGL Dlls可能比Microsoft的更快。
OpenGL畫布支持不同的字體大小和顏色，但它不支持多種字體樣式，字體的所有字符都將轉換為繪圖指令，這占用了相當多的內存和CPU速度。
TeeChart for .NET，TeeChart for JavaScript/HTML5，TeeChart for Xamarin.Android均已加入在線訂購，現在搶購可立享特別優惠?。?！
關注慧聚IT微信公眾號???，了解產品的最新動態及最新資訊。
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線