在EPX下基本的图形绘制方法.docx

EPX下基本的图形绘制方法2015-07-02 主讲：【司令】ePxwGm我现在来讲一下在EPX下基本的图形绘制方法首先，在EPX中绘制图形，使用到的基本类是TCanvas，叫画布，在其它的语言中也是相同的叫法TCanvas具有以下一些重要的属性和方法TCanvas对象是一个用于绘图的组件，Delphi利用这个组件为用户提供了一个绘制图形的区域，在这个区域上，程序可实现各种绘图功能，很多组件（如TImage、TMemo）的Canvas属性就是TCanvas对象。在组件上绘制图形就是在组件的画布上绘制。TCanvas的Brush、Pen、Font属性分别是TBrush、TPen、TFont对象，它们用于定义绘制图形的风格。画布的笔的位置定义在PenPos属性中，可用MoveTo方法来移动笔。如果要在画布上输出文本，可用Textout方法。基本的属性与方法掌握后，我们先要知道哪些控件具有画布属性，也就是说我们可以用哪些控件来绘图呢？在EPX中，用来绘图最好的对象就是TImage控件当然TForm等也有Canvas属性，也可以用来绘图好的，知道了TImage对象有Canvas属性了，是不是可以直接使用了呢？回答是“否”。因为TImage并不直接具有Canvas属性，不能直接绘制图形在Image上绘制图形，需要借助TBitmap来实现也就是要借助TImage的Picture.Graphic属性来实现下面我们来以代码示例说明一下如何在TImage控件上绘制一条直线var Canvas: TCanvas;/首先创建Graphic对象Image1.Picture.Graphic := TBitmap.Create;/然后取出CanvasCanvas := TBitmap(Image1.Picture.Graphic).Canvas;/接下来就可以直接绘图了Canvas.MoveTo(50,50); /将画笔移动到坐标为50，50的这一点Canvas.LineTo(300,100); /画笔落下开始画线，直到到坐标300,100处停止我来试一下上面的代码，看看效果是什么样的，大家也可以试一下【军长】伟伟(695131235) 10:06:58 不会Image1.Picture.Graphic := TBitmap.Create; Image1.Picture.Graphic.Width := Image1.Width; Image1.Picture.Graphic.Height := Image1.Height;需要在创建Bitmap后，设置一下位图的大小不过遗憾的是在Panel中，EPX暂时未开放Canvas属性不能直接画图，当然是有办法的，现在就不讲了，避免大家搞混淆，慢慢地到后面大家都学会了，就方便讲了通过以上代码，我能够画出这条直线，大家也可以画出这条直线接下来再来绘制一个圆和上图对比一下，可以发现文字已经没有再遮盖直线了EPX中Canvas绘图函数有几处与DELPHI不一样的地方例如，绘制一个矩形，在DELPHI中有两种参数传递方法：而EPX中则只允许使用第一种 AddMethod(procedure Draw(X, Y: Integer; Graphic: TGraphic), CallMethod); AddMethod(procedure Ellipse(X1, Y1, X2, Y2: Integer), CallMethod); AddMethod(procedure LineTo(X, Y: Integer), CallMethod); AddMethod(procedure MoveTo(X, Y: Integer), CallMethod); AddMethod(procedure Rectangle(X1, Y1, X2, Y2: Integer), CallMethod); AddMethod(procedure RoundRect(X1, Y1, X2, Y2, X3, Y3: Integer), CallMethod); AddMethod(procedure StretchDraw(X1, Y1, X2, Y2: Integer; Graphic: TGraphic), CallMethod); AddMethod(function TextHeight(const Text: string): Integer, CallMethod); AddMethod(procedure TextOut(X, Y: Integer; const Text: string), CallMethod); AddMethod(function TextWidth(const Text: string): Integer, CallMethod); AddMethod(procedure DrawFocusRect(X1, Y1, X2, Y2: Integer), CallMethod); AddMethod(procedure CopyRect(X1, Y1, X2, Y2: Integer; Canvas : TCanvas; X3, Y3, X4, Y5: Integer), CallMethod); AddMethod(procedure Chord(X1, Y1, X2, Y2, X3, Y3, X4, Y4: Integer), CallMethod); AddMethod(procedure Arc(X1, Y1, X2, Y2, X3, Y3, X4, Y4: Integer), CallMethod); AddMethod(procedure FillRect(X1, Y1, X2, Y2: Integer), CallMethod); AddMethod(procedure FloodFill(X, Y: Integer; Color: TColor; FillStyle: TFillStyle), CallMethod); AddMethod(procedure FrameRect(X1, Y1, X2, Y2: Integer), CallMethod); AddMethod(procedure Lock, CallMethod); AddMethod(procedure Refresh, CallMethod); AddMethod(procedure Pie(X1, Y1, X2, Y2, X3, Y3, X4, Y4: Integer), CallMethod); AddMethod(procedure TextRect(X1, Y1, X2, Y2: Integer; X,Y : Integer; Text : string), CallMethod); AddMethod(function TryLock: Boolean, CallMethod); AddMethod(procedure Unlock, CallMethod); AddProperty(Handle, Integer, GetProp, SetProp); AddProperty(CopyMode, Integer, GetProp, SetProp); AddProperty(Font, TFont, GetProp, SetProp); AddProperty(Pen, TPen, GetProp, SetProp);以上是在EPX中提供的关于TCanvas的属性与方法其参数要严格按照以上说明进行输入，不可以直接完全使用DELPHI的经验来执行现在就再来讲解一下如何来绘制一条空心的线条其实绘制空心线条很容易，就是绘制两条线就可以，第一条比较粗，第二条比较细，从同一起点到终止我来先尝试一下第二条细线的颜色调整为背景颜色 /绘制粗线 Canvas.MoveTo(50,50); Canvas.Pen.Color := clRed; Canvas.Pen.Width := 5; Canvas.LineTo(300,100); /绘制细线 Canvas.MoveTo(50,50); Canvas.Pen.Color := clWhite; Canvas.Pen.Width := 3; Canvas.LineTo(300,100);当然圆也可以做相同处理文字要做空心就没有那么容易了老師, 如果按這種思路繪製的話, 會有這樣一個問題: 如果背景是圖片的話, 空心線的空心處不是透明的, 而是其它顏色.那处理也很简单，看来你一直在看我讲解的内容，是吧我现在讲的是一些最基本的内容，如果是处理图片，其实绘制空心线条也是有办法的那肯定要了解一下嘛. 目前還沒有辦法用EPX軟件去試, 但看看老師的講解還是有用的处理方法是从图片上使用Pixels将图片中的颜色设置到空心处即可，需要增加一个过程我處理透明的方法時, 取背景圖的坐標點為空心處的座標先同样的使用以上方法在图片上绘制空心线条然后将空心线中，白色的部分，使用图片相对应的位置的颜色置换即可看来是一样的再说一下文字的空心处理方法文字由于不受画笔大小控制，因此空心起来是相对比较困难的我们可以多绘制几次文字来解决这个问题在一个文字的八个方向全部绘制一次相同颜色的文字，然后再在中心使用背景色绘制一次文字，就出现了空心文字，我放上代码 Canvas.Font.Color := clGreen; Canvas.TextOut(199,99,Hello，EPX绘图.); Canvas.TextOut(201,100,Hello，EPX绘图.); Canvas.TextOut(199,99,Hello，EPX绘图.); Canvas.TextOut(200,99,Hello，EPX绘图.); Canvas.TextOut(201,99,Hello，EPX绘图.); Canvas.TextOut(199,101,Hello，EPX绘图.); Canvas.TextOut(200,101,Hello，EPX绘图.); Canvas.TextOut(201,101,Hello，EPX绘图.); Canvas.Font.Color := clWhite; Canvas.TextOut(200,100,Hello，EPX绘图.);现在讲最后一点，就是绘制图片到图形中如果需要绘制图片或照片到图形中，有两个函数一个是Draw一个是StretchDraw这两个函数不同之处在于是否拉伸图片大小我们现在来绘制如下图片到指定位置其實在Delphi 裡做空心字體還是比較簡單的当然我们绘制上去是不会动的当然如果使用AAFONT做空心字体更简单我现在在讲的是关于TCanvas的基本用法那倒是如果已经掌握了基础的，我可以出比较有难度的题目来做现在群里有大量的基本语法没有过关的老師, 什麼時候給實習一下GDI+這類的學習方法实习？老師這個是TCanvas畫的?補習GDI+不也很简单吗？我们先普及基础好了，上面的方法是一些基本的方法，现在我再讲一下如何绘制过渡色有精力的可以跟着看，没有精力的，可以以后慢慢学说着说着就被打乱了还没有说绘制图片呢我先写这句代码了再说 var Pic: TPicture; Pic:= TPicture.Create; Pic.LoadFromFile(VarToStr(CommandLine.WorkRoot) + TankChartGX.gif); Canvas.Draw(50,200,Pic.Graphic); FreeAndNil(Pic);绘制过渡色比较复杂一些，我们编写一个通用的函数，由于时间有限，我先写一个最基本的，大家可以优化我取的函数名称是绘制的横向过渡色，大家可以改为其它的过渡形式，比如纵向，射线等DrawHorizonalTransitionprocedure SplitColor( AColor : TColor;var R ,G , B : Integer );var SColor : string; SR, SG, SB : string;begin SColor := Format( %.6x,AColor ); R := StrToInt( $ + SColor 5 + SColor 6 ); G := StrToInt( $ + SColor 3 + SColor 4 ); B := StrToInt( $ + SColor 1 + SColor 2 );end;procedure DrawHorizonalTransition(Canvas : TCanvas;ALeft,ATop,AWidth,AHeight: Integer; BaseColor : TColor; RStep, GStep, BStep : Real;Position : Real);var SwapBmp : TBitmap; Red, Green, Blue : Byte; I : Integer; NRed, NGreen, NBlue : Integer; Colors : TStringList; LPoints,RPoints,Flag : Integer;begin SwapBmp := TBitmap.Create; SwapBmp.Width := AWidth; SwapBmp.Height := 1; LPoints := Round( SwapBmp.Width * Position ); RPoints := SwapBmp.Width - LPoints; SplitColor( BaseColor, Red, Green, Blue ); for I := -LPoints to RPoints do begin NRed := Red + Round( RStep * I ); if NRed 254 then begin NRed := 255; end; NGreen := Green + Round( GStep * I); if NGreen 254 then begin NGreen := 255; end; NBlue := Blue + Round( BStep * I); if NBlue 254 then begin NBlue := 255; end; SwapBmp.Canvas.Pixels LPoints + I, 0 := this.RGB( NRed,NGreen,NBlue ); end; Canvas.StretchDraw( ALeft,ATop,ALeft + AWidth,ATop + AHeight,SwapBmp ); FreeAndNil( SwapBmp );end;调用的语句就写在刚才我加载图片的语句下面了这样子，绘制的颜色就是过渡的了各种参数调整就可以绘制出不同的过渡颜色来最后，就是如何通过EPX将绘制的图形制作为动画这里也介绍一下，我们将上面绘制的过程直接输出为GIF动画這個功能有需要很好D對GIF的支持不是很好, 特別是XE以下的版本代码如下procedure TForm1.Button1Click(Sender: TObject);var Canvas: TCanvas; Pic: TPicture; ATarFile,ABmpFile,AGifFile: string;begin ATarFile := VarToStr(CommandLine.ProjectRoot) + EPXCanvas.gif; if this.FileExists(ATarFile) then this.DeleteFile(ATarFile); Image1.Picture.Graphic := TBitmap.Create; Image1.Picture.Graphic.Width := Image1.Width; Image1.Picture.Graphic.Height := Image1.Height; Canvas := TBitmap(Image1.Picture.Graphic).Canvas; /绘制粗线 Canvas.MoveTo(50,50); Canvas.Pen.Color := clRed; Canvas.Pen.Width := 5; Canvas.LineTo(300,100); /转换第一帧为GIF初始帧 ABmpFile:=this.GetWindowsTempPath + + this.GuidString + .bmp; AGifFile:=this.GetWindowsTempPath + + this.GuidString + .gif; Image1.Picture.SaveToFile(ABmpFile); this.ConvertImageFormat(ABmpFile,AGifFile); this.DeleteFile(ABmpFile); this.CopyFile(AGifFile,ATarFile,True); /设置初始帧的时间等待 this.ModifyGIFFrameDelay(ATarFile,0,300); this.DeleteFile(AGifFile); /绘制细线 Canvas.MoveTo(50,50); Canvas.Pen.Color := clWhite; Canvas.Pen.Width := 3; Canvas.LineTo(300,100); /处理第二帧 ABmpFile:=this.GetWindowsTempPath + + this.GuidString + .bmp; AGifFile:=this.GetWindowsTempPath + + this.GuidString + .gif; Image1.Picture.SaveToFile(ABmpFile); this.ConvertImageFormat(ABmpFile,AGifFile); this.DeleteFile(ABmpFile); this.AddAFrameToGIFImage(ATarFile,AGifFile,300); this.DeleteFile(AGifFile); Canvas.Pen.Color := clBlue; Canvas.Pen.Width := 3; Canvas.Ellipse(100,100,200,200); /处理第三帧 ABmpFile:=this.GetWindowsTempPath + + this.GuidString + .bmp; AGifFile:=this.GetWindowsTempPath + + this.GuidString + .gif; Image1.Picture.SaveToFile(ABmpFile); this.ConvertImageFormat(ABmpFile,AGifFile); this.DeleteFile(ABmpFile); this.AddAFrameToGIFImage(ATarFile,AGifFile,300); this.DeleteFile(AGifFile); Canvas.Font.Name := 微软雅黑; Canvas.Font.Size := 24; Canvas.Brush.Style := bsClear; /让画刷背景透明 Canvas.Font.Color := clGreen; Canvas.TextOut(199,99,Hello，EPX绘图.); Canvas.TextOut(201,100,Hello，EPX绘图.); Canvas.TextOut(199,99,Hello，EPX绘图.); Canvas.TextOut(200,99,Hello，EPX绘图.); Canvas.TextOut(201,99,Hello，EPX绘图.); Canvas.TextOut(199,101,Hello，EPX绘图.); Canvas.TextOut(200,101,Hello，EPX绘图.); Canvas.TextOut(201,101,Hello，EPX绘图.); Canvas.Font.Color := clWhite; Canvas.TextOut(200,100,Hello，EPX绘图.); /处理第四帧 ABmpFile:=this.GetWindowsTempPath + + this.GuidString + .bmp; AGifFile:=this.GetWindowsTempPath + + this.GuidString + .gif; Image1.Picture.SaveToFile(ABmpFile); this.ConvertImageFormat(ABmpFile,AGifFile); this.DeleteFile(ABmpFile); this.AddAFrameToGIFImage(ATarFile,AGifFile,300); this.DeleteFile(AGifFile); Pic:= TPicture.Create; Pic.LoadFromFile(VarToStr(CommandLine.WorkRoot) + TankChartGX.gif); Canvas.Draw(50,200,Pic.Graphic); FreeAndNil(Pic); /处理第五帧 ABmpFile:=this.GetWindowsTempPath + + this.GuidString + .bmp; AGifFile:=this.GetWindowsTempPath + + this.GuidString + .gif; Image1.Picture.SaveToFile(ABmpFile); this.ConvertImageFormat(ABmpFile,AGifFile); this.DeleteFile(ABmpFile); this.AddAFrameToGIFImage(ATarFile,AGifFile,300); this.DeleteFile(AGifFile); DrawHorizonalTransition(Canvas,250,200,150,35,clBlue,0.75,1.75,1.75,0.15); /处理第六帧 ABmpFile:=this.GetWindowsTempPath + + this.GuidString + .bmp; AGifFile:=this.GetWindowsTempPath + + this.GuidString + .gif; Image1.Picture.SaveToFile(ABmpFile); this.ConvertImageFormat(ABmpFile,AGifFile); this.DeleteFile(ABmpFile); this.AddAFrameToGIFImage(ATarFile,AGifFile,300); this.DeleteFile(AGifFile); /最后设置GIF永久性循环 this.ModifyGIFLoopTimes(ATarFile,0);end;看到除了初始帧的生成GIF有一点差异外，其它的都是一样的，当然你可以根据需要去修改延迟时间效果也送上好了，今天关于EPX图形绘制先讲这些有疑问可以继续交流。谢谢大家的观看这些都只是一些最基本的图形处理方法，在EPX中，具有非常强大的图形处理能力当然都是在掌握这些基本的处理方法基础之上再才能够拓展的大家可能还会问GIF透明处理问题，自己看，API中都要相关方法下面再借助Canvas结合我们学过的一些数学函数知识来绘制一些数学图形。首先，我们来绘制一条正弦曲线procedure TForm1.Button1Click(Sender: TObject);var Canvas: TCanvas; X,Y: Integer; FirstPoint: Boolean;begin Image1.Picture.Graphic := TBitmap.Create; Image1.Picture.Graphic.Width := Image1.Width; Image1.Picture.Graphic.Height := Image1.Height; Canvas := TBitmap(Image1.Picture.Graphic).Canvas; /绘制一个正弦函数 Y = SIN(X/50) FirstPoint := True; for X := Round(-PI * 50) to Round(PI * 50) do begin Y := Round(60 * Sin(X / 50); if FirstPoint then begin FirstPoint := False; Canvas.MoveTo(200 + X,100 + Y); end else begin Canvas.LineTo(200 + X,100 + Y); end; end; end;余弦曲线呢？就将函数修改为Cos即可借助我们上午学到的知识，我们将坐标系添加上procedure TForm1.Button1Click(Sender: TObject);var Canvas: TCanvas; X,Y: Integer; FirstPoint: Boolean;begin Image1.Picture.Graphic := TBitmap.Create; Image1.Picture.Graphic.Width := Image1.Width; Image1.Picture.Graphic.Height := Image1.Height; Canvas := TBitmap(Image1.Picture.Graphic).Canvas; Canvas.Pen.Color := clGray; /绘制横轴 Canvas.MoveTo( 200 + Round(-PI * 50) - 30,100); Canvas.L