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的使用方法。
本篇教程為大家?guī)淼氖?a target="_self" style="white-space: normal; color: rgb(31, 73, 125);">TeeChart Pro VCL/FMX中圖表面板上的自定義繪圖的這一節(jié)，TeeChart通過TCanvas3D組件提供廣泛的定制繪圖設(shè)施。 使用Canvas，您可以在Chart Panel/圖表面板的任何位置添加形狀，線條和文本，并定義其顏色，筆和畫筆樣式。內(nèi)容主要分為以下幾個部分：
TeeChart Canvas
繪圖順序和繪圖線
Canvas筆和畫筆
添加2D形狀和3D形狀
添加文本
應(yīng)用實例
高級自定義繪圖
組件概述
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進(jìn)行的位移。
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屬性進(jìn)行特殊的自定義繪圖，則應(yīng)將此單元添加到格式Uses中，使用它是安全的，因為除了普通的Delphi單元之外它沒有依賴性。
TCanvas3D類
此Canvas派生類包含對3D旋轉(zhuǎn)，縮放，滾動和3D基元的支持。它具有虛擬和抽象的所有方法，因此意味著您無法直接使用它，您應(yīng)該使用實現(xiàn)所有方法和屬性的派生類。
使用此Canvas，Chart組件現(xiàn)在可以支持插件畫布，也就是說，您可以在設(shè)計時或運(yùn)行時更改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類：
此類駐留在單獨(dú)的單元/包中，以使應(yīng)用程序獨(dú)立于OpenGL的DLL，它僅適用于32位Delphi（和C ++ Builder）。當(dāng)使用TGLCanvas作為圖表時，包括使用TeeGLEditor，圖表編輯器將在運(yùn)行時添加另一個頁面以更改GL特征，例如燈光位置和顏色，要使OpenGL在設(shè)計時可用，請將TTeeOpenGL組件添加到Form，將其與Chart關(guān)聯(lián)并設(shè)置為 Active：= True。
新的非可視組件（TTeeOpenGL），允許您在設(shè)計或運(yùn)行時將現(xiàn)有圖表連接到它，并立即看到使用OpenGL 3D庫所呈現(xiàn)的圖表，此組件還允許您定義OpenGL特定屬性，如Lighting屬性。
TTeeCanvas3D和TGLCanvas之間的比較：
OpenGL畫布支持照明（燈光，燈光顏色，位置等），而TeeCanvas使用較暗的顏色繪制3D來模擬光照。
OpenGL畫布不支持 metafile 創(chuàng)建，因此對于打印，應(yīng)該創(chuàng)建一個大而胖的TBitmap并將其發(fā)送到打印機(jī)Canvas，這意味著它只適用于具有良好內(nèi)存和優(yōu)良驅(qū)動程序的打印機(jī)，它無法創(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)及最新資訊。
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線