TeeChart For VCL/FMX V2017使用教程：第十三章 在图板上自定义画图

---

通过TCanvas3D组件，TeeChart提供了广泛的定制自定义绘图工具。使用Canvas（画布），你可以在图表面板的任何地方添加形状、线条和文字，并定义它们的颜色、笔和画笔样式。

目录
13.1 TeeChart画布 绘制顺序 画线 画布画笔和刷子 添加2D形状 添加3D形状 添加文字 应用示例	13.2 高级自定义画图 （1）组件概述

---

13.1 TeeChart画布

13.1.1 绘制顺序

当使用TeeChart画布方法时，记住绘制顺序是很重要的。在图表上画一条线，然后添加一序列的数据点将会导致线被超画。要使线出现在图表网格上面和序列下面，您可以将线放置到序列的BeforeDrawValues事件中。您可以在OnAfterDraw事件中放置行代码，以便让线出现在这个序列的上方。

事件顺序，4个原则图表绘制事件

• OnBeforeDrawChart event
• OnBeforeDrawAxes event
• OnBeforeDrawSeries event
• OnAfterDraw event

13.1.2 画线

1） 2D图表

        让我们添加一个画布:

        示例

//从左上方到右下方画一条对角线 
//在2D图表的图表区域里
With Chart1, ChartRect do
begin
  //将指针移到左上角的图表点
  Canvas.MoveTo(Left,Top);
    //画线
  Canvas.LineTo(Right,Bottom);
end;

2） 3D正交图表

        在一个正交的3D图表中，由于三维正交位移，轴的位置会被偏移。因此我们相应地要移动这条线：

示例

//从左上方到右下方画一条对角线
//在3D图表的图表区域里
With Chart1, ChartRect do
begin
  //将指针移到左上角的图表点
  Canvas.MoveTo(Left + Width3D,Top - Height3D);
  //画线 +调整3D位移
  Canvas.LineTo(Right + Width3D,Bottom - Height3D);
end;

3） 3DNativemode 或OpenGL 图表

        在Native 3D图表或OpenGL图表上绘制相同的线(这也适用于2D和3D的正交图表)：

        //从左上方到右下方画一条对角线

        //在3D Nativemode或OpenGL图表的图表区域

With Chart1,Canvas do
begin
  Pen.Color := clBlue;
  Pen.Width := 1;
  Pen.Style := psDot; //Pen必须是1到使用Pen.Style
  Brush.Style := bsClear; //透明
  //然后画线
  MoveTo3D(ChartRect.Left,ChartRect.Top,0);
  LineTo3D(ChartRect.Right,ChartRect.Bottom,Width3D);
end;

        MoveTo3D和LineTo3D方法识别出了对ChartRect的位移，这是由于“Full”3D的Elevation（海拔）和Rotation（旋转）所造成的。

13.1.3 画布的画笔和刷子

        上面的线是用已定义的笔和笔刷绘制的，这是在绘制线条之前定义的最后一个绘制对象。若可能不是你想要的那支笔。你可以相应地换笔:

示例

//在绘制线条之前，先定义笔和画笔
With Chart1,Canvas,ChartRect do
begin
  Pen.Color := clBlue;
  Pen.Width := 1;
  Pen.Style := psDot; //Pen必须是1来使用Pen.Style
  Brush.Style := bsClear; //透明
  //然后画线
  MoveTo(Left + Width3D,Top - Height3D);
  LineTo(Right + Width3D,Bottom - Height3D);
end;

13.1.4 添加2D形状

        以类似的方式添加2D画布的形状。下面的例子在图表区域的中心添加了一个矩形：

1） 2D图表

        3D 正交图表仅支持2D形状.

示例

With Chart1, Canvas do
begin
   /准备笔和刷
   Pen.Color := clBlue;
   Pen.Width := 1;
   Pen.Style := psDot;
   Brush.Color := clWhite;
   Brush.Style := bsSolid;
   //你可以在任何图表上绘制一个矩形(2D或3D)
   Rectangle(100,100,200,200);
end;

        在3D图表上，你也可以在Z平面上移动矩形。参看RectangleWithZ方法。这个例子是一个正交或Nativemode/OpenGL的图表，将矩形放在左边的墙上，但是将它移动到图表的后半部分(朝向后墙)。

With Chart1,Canvas,ChartRect do
begin
   //准备好笔和刷
   Pen.Color := clBlue;
   Pen.Width := 1;
   Pen.Style := psDot;
   Brush.Color := clWhite;
   Brush.Style := bsSolid;
   //用Z位移矩形绘制矩形
   RectangleWithZ(Rect(Left,  Top,  Left+((Right-Left) div 2),  Top+((Bottom-top) div 2)),  Width3D div 2);
end;

13.1.5 添加3D形状

        你可以将3D形状添加到3D图表中。这个例子在图表矩形的左上象限绘制了一个立方体。这个深度覆盖了从墙前面到墙后面的区域。参看Cube的方法。

With Chart1,Canvas,ChartRect do
begin
   //准备好笔和刷
   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;

13.4.6 添加文字

        1） 2DText location

        将文本添加到一个矩形中:

        示例

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;
    //准备好笔和刷
    Pen.Color := clBlue;
    Pen.Width := 1;
    Pen.Style := psDot;
    Brush.Color := clWhite;
    Brush.Style := bsSolid;
    //画矩形
    Rectangle(rectLeft,rectTop,rectRight,rectBottom);
    //修改字体
    Font.Color := clRed;
    //在矩形的中点开始添加文本
    TextOut(rectLeft + (rectRight - rectLeft) div 2, rectTop + (rectBottom-rectTop) div 2, 'Hello');
 end;
end;

2） 3D 文本定位

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

        示例

With Chart1, Canvas, ChartRect do
 begin
   Brush.Style := bsClear;
   TextOut3D(Left, Top, Width3D div 2, 'Hello');
 end;

13.1.7 应用示例

        这个例子取一个序列的第三和第十个值，在它们之间绘制一条线，告诉我们新线的第一个和最后一个点的值，以及它们之间的区别：

示例

首先将一些数据添加到空的图表中
procedure TForm1.BitBtn1Click(Sender: TObject);
begin
  Series1.FillSampleValues(20);
end;

//你可以把这段代码放到OnAfterDraw事件中
procedure TForm1.Chart1AfterDraw(Sender: TObject);
begin
 With Chart1 do
 Begin
   If SeriesCount > 0 Then
   begin
     If Series1.Count > 10 Then
     begin
       //添加一些形状
       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;

13.2 高级自定义绘图

13.2.1 组件概述

        几乎所有的TeeChart单元现在都使用了TeCanvas单元。这个单元是一个低级单元，它提供了封装在新的TCanvas3D组件中的所有绘图函数。

        如果您使用TeeChart 的Canvas属性进行特殊的自定义绘制，那么您应该将该单元添加到您的窗体“Uses”子句中。使用它是安全的，因为它除了正常的Delphi单元之外没有其他依赖项。

1） TCanvas3D类：

        这个由Canvas派生的类包含了对3D旋转、缩放、滚动和3D基本体的支持。它的所有方法都是虚拟的和抽象的，所以这意味着你不能直接使用它。您应该使用一个继承类来实现所有的方法和属性。

        使用此Canvas，图表组件现在可以支持“插件”画布。也就是说，您可以在设计时或运行时更改“Chart1.Canvas”属性，所有的绘画都将被重定向到新的画布：

        Chart1.Canvas := TGLCanvas.Create ;  //<--开关显示为OpenGL

        TeeChart包括这些新的虚拟画布:

• TTeeCanvas3D
• TGLCanvas (为OpenGL渲染)

实现一个新的虚拟Canvas，虽然不是简单的，但应该很容易做到。例如，您甚至可以创建一个TVRMLCanvas，它将生成一个包含VRML(虚拟现实)图形指令的ascii文件。(或者另一个保存到DXF、3DS、等等)。

这些画布应用于基本的TCustomChart类，因此它们适用于TChart、TDBChart、TQRChart或任何其他派生的图表类。

注意:OpenGL DLL只用于32位Windows，因此也就是GLCanvas。

2） TTeeCanvas3D类：

这是内部使用的虚拟TCanvas3D类的实现。它是一个标准的Delphi TCanvas类的包装器。它有许多直接调用Windows GDI来加速绘图。它增加了Tcanvas3D特性，如旋转、缩放等。它适用于所有的Delphi和C++Builder版本。

3） TGLCanvas 类：

这个类驻留在一个单独的单元/包中，以使应用程序独立于OpenGL的dll。它只适用于32位Delphi(和C++Builder)。当使用TGLCanvas来绘制图表时，应包括“Uses TeeGLEditor”，图表编辑器将在运行时添加另一个页面来改变GL的特征，如光线的位置和颜色。对于OpenGL在设计时可用，在窗体中添加TTeeOpenGL组件，将它与图表关联起来，并设置Active:=True。

有一个新的非可视组件(TTeeOpenGL)，它允许您在设计或运行时“connect（连接）”一个现有的图表，并立即看到使用OpenGL 3D库渲染的图表。这个组件允许你定义OpenGL的特定属性，比如灯光属性。

TTeeCanvas3D和TGLCanvas的比较:

 

• OpenGL画布支持照明(光线、光线颜色、位置等)，而TeeCanvas则用深色的颜色来模拟光线画3D面。
• OpenGL画布不支持元文件的创建，因此为了打印一个大而胖的Tbitmap，它应该被创建并发送到打印机画布，这意味着它只能工作于具有良好内存和正常驱动的打印机。元文件不能被创建，复制到剪贴板，保存或打印。
• OpenGL画布需要OpenGL dll（在Windows NT及以后中可用，可以从www.sgi.com访问其他替代库。取决你的CPU和视频硬件，来自于Silicon Graphics（硅谷图形公司）的OpenGL Dlls可能比来自微软的更快）。
• OpenGL画布支持不同的字体尺寸和颜色，但是它不支持多种字体样式。字体的所有字符都被转换成绘图指令。这占用了大量的内存和CPU速度。

 

---

第十三章 完