关于swt 2D图形的一些知识介绍

org.eclipse.swt.graphics包（package），包含了管理图形资源的类。只要实现了org.eclipse.swt.graphics.Drawable接口，就可在上面绘画，包括 org.eclipse.swt.widgets.Control 和 org.eclipse.swt.graphics.Image 。 org.eclipse.swt.graphics.GC封装了全部绘画API，包括如何绘制线条、图形、如何绘制文本、图像以及填充图形。 本篇将展示如何使用GC在图像上绘画， 控件的绘画事件（paintEvent）回调。画布（Canvas）控件，因为不同的绘画操作，拥有很多构造风格常量允许你指定何时以及如何产生绘画，本篇也将展示这些东西。

英文原文：Graphics Context - Quick on the draw   http://www.eclipse.org/articles/Article-SWT-graphics/SWT_graphics.html

目录：

图形上下文

在图像（Image）上绘画

在控件（control）上绘画

切割（cliping）

画布（Canvas）

绘制线条和形状（Drawing lines and shapes）

绘制文本（Drawing text）

填充形状（Filling shapes）

异或（XOR）

绘制图像（Drawing images） 

SWT图形系统使用了与控件（Control）相同的坐标习惯，即客户区最左上角开始的点为原点（0，0），x轴坐标向右增加，y轴坐标向下增加。Point 类被用于描述位置（坐标系统中的位置）以及偏移量（SWT中并没有Dimension类，矩形（rectangle）的大小是由Point类捕获的x、y坐标点偏移量到原点坐标来描述的）。

图形上下文（Graphics Context）

图形能够被画在任何实现了org.eclipse.swt.graphics.Drawable接口的东西上，比如控件（Control）、图像（Image）、显示设备或者打印设备。 org.eclipse.swt.graphics.GC 就是封装了执行绘画操作的图形上下文（graphics context）。一般有两种使用GC的方法：一种是让Drawable 实例作为GC构造函数的参数获取的GC，另外一种是绘画事件（paintEvent）回调提供的GC。

在图像（Image）上绘画

以下代码是把一个图像作为构造参数获取图像的GC，然后在它上面绘制线条。  从左上角顶点（0,0）处向右下角顶点画线条  从右上角顶点向左下角顶点画线条。

   

    Image image = new Image(display,"C:/devEclipse_02/eclipse/plugins/org.eclipse.platform_2.0.2/eclipse_lg.gif");
    GC gc = new GC(image);
    Rectangle bounds = image.getBounds(); 
 gc.drawLine(0,0,bounds.width,bounds.height); 
 gc.drawLine(0,bounds.height,bounds.width,0); 
 gc.dispose();
    image.dispose(); 

原始图像	绘制线条后的图像

 

 由你创建的GC，就得由你负责销毁它。调用 dispose（）方法。关于怎样管理 SWT 资源的更多信息请参见 SWT: The Standard Widget Toolkit 。一个 GC 实例应该在使用完后就尽可能快的释放，这是因为每一个GC 都需要占用底层系统平台资源，而在某些操作系统平台中，这些资源是相当匮乏的，例如Windows 98仅仅提供了5个GC 对象。

在控件（Control）上绘画

org.eclipse.swt.widgets.Control实现了Drawable接口，所以你可以在控件（Control）上绘画，图像(Image)上绘画方法与控件相同(把控件或图像作为参数传给GC获取控件或图像的GC，然后在其上进行绘画)。但是，图像（Image）上的绘画与控件有所不同是图像的修改是永恒不变的。如果使用GC在控件上进行绘画，操作系统自身在绘制控件时会覆盖你所做的绘画操作。正确的方法的是为控件添加一个绘画监听器，这个监听器类就是org.eclipse.swt.events.PaintListener，然后在监听器中回调方法参数就是org.eclipse.swt.events.PaintEvent的一个实例。PaintEvent 包含了一GC，这样在控件上面或者是指定区域里面进行绘画的环境就准备好了

 

以下代码 给Shell添加了一个绘画监听， 然后在paintControl（）方法中画一条连接原点到底部右下角的直线。

    Shell shell = new Shell(display); 
 shell.addPaintListener(new PaintListener(){
        public void paintControl(PaintEvent e){
            Rectangle clientArea = shell.getClientArea(); 
         e.gc.drawLine(0,0,clientArea.width,clientArea.height);
        }
    });
    shell.setSize(150,150)

 

  

虽然Shell的大小设置为（150,150）, 但实际上可绘画的区域比这还要再小一些，因为Shell还包括了边框、工具栏以及菜单栏，这也就是我们所要了解的客户区域。任何面板（Composite）都是使用getClientArea()方法获取客户区域的。

因为应用程序总是在底层OS绘制完控件后才得到绘画事件，所以绘画事件中的GC进行绘画后的效果就可以最终显示在控件上面了。当然也有例外，比如工具栏区域就不能在上面进行绘画。org.eclipse.swt.widgets.Canvas 能够用来进行多方面的图形绘画操作。

 

剪切（Clipping）

一个GC的剪切区域就是发生绘画的那部分，这里有个例子，如果你要填充出一个有缺口的三角形形状，一种方法是画出多个三角形和矩形组合出这么一个形状；当然也有另一种方法，就是利用GC的剪切操作。

   

    shell.addPaintListener(new PaintListener() {
        public void paintControl(PaintEvent e) {
            Rectangle clientArea = shell.getClientArea();
            int width = clientArea.width;
            int height = clientArea.height; 
         e.gc.setClipping(20,20,width - 40, height - 40);
            e.gc.setBackground(display.getSystemColor(SWT.COLOR_CYAN)); 
         e.gc.fillPolygon(new int[] {0,0,width,0,width/2,height});
        }
    });

 

这段代码在Shell上画了一个三角形。 左上角和右上角连接到底部边缘的中间。使用一个矩形CG对其进行剪切。 最后显示出被剪切的矩形区域。 

 

 

当控件发生绘画事件，GC总是剪切需要重绘的那部分区域。例如，另一个窗口移到了一个SWT shell的前面，随后又移走。那么需要重新显示的就是GUI被损坏的那部分（shell被覆盖的那部分），一个绘画事件就是事件队列。当绘画事件发生，paintControl(PaintEvent evt) 方法中的参数就包含了控件中需要的重绘区域的x、y坐标字段及宽和高字段。控件的受损部分能够包含若干个相分离的矩形区域，当绘画事件发生，控件的受损部分不止一个时，那么它们就会被合并成一个单一的矩形。这一步是由底层平台来实现的，因为多个绘画事件在单独的一个回调过程中处理有利于执行。

 

在上面的例子中每当 paintControl(PaintEvent)被调用的时候， 就将在PaintEvent's area中寻找一个优化。绘画事件（paint event）很可能不交叉在绘画的形状（shape）中，在这种情况下，就不需要绘画（painting）或者指使需要一部分重画而已。依靠绘画的类型，就可以解决GC所选择的绘画部分，但事实上这要比GC剪切花费更多开销，而且在实践中常常忽视这些被损坏的区域让GC重新绘画全部，只有在刷新操作中才会依赖剪切。

 

如果程序需要手工损坏控件的某部分区域，可以使用Control.redraw(int x, int y, int width, int height)或者使用Control.redraw()损坏整个客户区域。此区域就被打上了标记然后包含在下一个绘画事件中，产生闪屏后，就会立即使用Control.update()方法强制处理控件的绘画请求。如果无绘画请求（也就是客户区域无损坏）, update()就什么不做。

（译者注：此处的Control并不单指Control类，而是指所有继承了Control类的控件类，比如button,canvas,shell等等）

画布（Canvas）

虽然任何控件都可以通过绘画事件（paintEvent）在其上进行绘制, 但是org.eclipse.swt.widgets.Canvas 是针对图形操作而特别设计的。可以直接使用Canvas，也可以通过添加绘画事件（paintEvent）使用，还可以创建Canvas的子类来自定义控件重复使用之。画布（Canvas）拥有大量的风格样式来影响绘画的产生。 

Canvas的默认行为是使用当前背景色填充自身的整个客户区域。这样会引起屏闪，因为绘画事件也是在GC上绘画，所以用户就会看到被填充的原始背景色和产生绘画之间的闪烁。有一种方法可避免此类情况，在创建Canvas时使用SWT.NO_BACKGROUND样式。这样就防止了绘画背景，意思就是程序要负责绘画客户区域的每一个像素。

 

当部件调整大小时，客户区域会重复绘画，这就会出现屏幕闪烁。使用SWT.NO_REDRAW_RESIZE 可减少这样的情况，控件会减少不必要的重绘。比如改变尺寸大小，绘画事件GC只会剪切需要重绘的部分即底部区域和右边区域，就像一个反方向的“L”。

 

在固定大小的GC上绘画NO-REDRAW_RESIZE样式能很好的减少屏闪。但是错误的使用NO_REDRAW_RESIZE 可以导致图形成扁圆形。扁圆形是个大概的说法，事实上是指部件没有随大小的调整而进行正确的更新。下面的例子就演示了这样的情况。 填充椭圆形。因为在窗口大小改变时没有产生绘画事件，因为GC只剪切受损的（发生改变的）区域，而上一个绘画又没有被抹去，这就产生了扁圆形状。( 即使用NO_REDRAW_RESIZE 绘画事件只处理扩大的那部分区域，原先部分它就不管了).

 

    shell.setLayout(new FillLayout()); 
 final Canvas canvas = new Canvas(shell,SWT.NO_REDRAW_RESIZE);

    canvas.addPaintListener(new PaintListener() {
        public void paintControl(PaintEvent e) {
            Rectangle clientArea = canvas.getClientArea();
            e.gc.setBackground(display.getSystemColor(SWT.COLOR_CYAN)); 
         e.gc.fillOval(0,0,clientArea.width,clientArea.height);
        }
    });

 

canvas的大小被增大，GC只剪切需要重绘的地方，扁圆形状就产生了。

 

 

问题出在 ，应该使用SWT.NONE 样式，这样GC就不会只剪切扩大的部分了。所以当Shell大小增大时整个椭圆形都会被重绘。

 

 final Canvas canvas = new Canvas(shell,SWT.NONE);

 

任何SWT部件，如果超过一个矩形区域被“损坏”，平台会把它们合并成一个，也就是说SWT程序只能处理一个绘画事件。在Canvas上使用NO_MERGE_PAINTS 样式可以覆盖这样的行为，可以为每一个被“损坏”的矩形区域调用绘画事件监听。

 

风格常量NO_BACKGROUND, NO_REDRAW_RESIZE 以及NO_MERGE_PAINTS 能够被使用在任何面板（Composite）以及子类中, 包括Canvas、Shell以及Group。 虽然这是被SWT允许的（不会由异常抛出），但在Composite 类的Javadoc中关于风格有这样的警告 "... 如果在其他的Composite子类中（除了Canvas）使用其行为是不明确的。"。所以实现图形绘画操作Canvas应该是首选。

 

另一种减少屏幕闪烁的方法，就是使用双缓冲技术。你可以先根据Canvas客户区域大小创建Image对象，然后使用GC(Image)将其绘画到Canvas上;  在绘画事件GC中调用drawImage(Image image, int x, int y)。 在一些平台上已经为你实现了双缓冲，所以你可以根据情况考虑使用三缓冲。

 

绘制线条和形状（Drawing lines and shapes） GC 拥有很多绘画线条的方法，比如画连接两个坐标点的直线、连接多个坐标点的直线或者是预先定义好的形状，线条颜色就是GC的前景色，可以通过风格样式常量来决定线条的粗细胖瘦。绘画事件其GC也有很多相同的属性（前景色、背景色、以及颜色），并且线条的默认宽度是1像素。

GC.drawLine(int x1, int y1, int x2, int y2);

画一条从坐标点（x1,y1）到坐标点（x2,y2）的直线，如果两点的坐标值相同就相当于画一个圆点。

GC.drawPolyline(int[] pointArray);

画一条连接多个坐标点的直线，int[] 存放着要连接的x、y坐标值。代码如下:

gc.drawPolyline(new int[] { 25,5,45,45,5,45 });

先是从坐标点25,5到45,45，然后从45,45到5,45。

 

GC.drawPolygon(int[] pointArray);

drawPolyline(int[])的使用与gc.drawPolyline很相似，不同的是最后一个点（5,45）连接了第一个点（25,5）。

gc.drawPolygon(new int[] { 25,5,45,45,5,45 });

相当于用三条线段链接三角形的单个端点，从而形成了一个三角形区域。

GC.drawRectangle(int x, int y, int width, int height);

画一个矩形区域，int x,int y是矩形左上角的坐标点，int width,int heighy分别是矩形的宽和高。

gc.drawRectangle(5,5,90,45);

左上角坐标点为（5,5），对角坐标点为（95，50）。

你可以将Rectangle作为一个单独的参数传送给绘画方法。GC.drawRectangle(Rectangle);

GC.drawRoundedRectangle(int x, int y, int width, int height, int arcWidth, int arcHeight);

圆角矩形不同于标准矩形，它的四角呈圆形。每一个圆角实际上就是一个1/4的椭圆形，其弧宽和弧高就是完整椭圆形的宽和高。

gc.drawRoundedRectangle(5,5,90,45,25,15)

画了一个圆角矩形，左顶角坐标值（5,5）。下面是圆角矩形的右下角放大图，其宽和高分别是25、15。 

 

虽然调用4次drawArc()和4次drawLine()完全可以实现一个圆角矩形。但在一些平台下，例如Windows或者Photon，SWT就可以使用非常优秀的平台API。

GC.drawOval(int x, int y, int width, int height);

一个椭圆形是画在矩形里的，所以由矩形的左顶点坐标以及宽和高来定义。定义一个正圆形同样使用这个方法。

gc.drawOval(5,5,90,45);

GC.drawArc(int x, int y, int width, int height, int startAngle, int endAngle);

一个弧形是被画在一个指明了高和宽以及左顶角x,y坐标的矩形区域内。int startAngle是个角度，是开始画弧形的位置，开始点就是此角度与X轴坐标线相交的那个点。int endAngle同样是角度，它是弧形结束的位置，道理和int startAngle相同。

gc.drawArc(5,5,90,45,90,200);

这里画了一个弧形，从90度垂线和X轴坐标相交处开始，然后持续画200度。

GC.setLineStyle(int style);

线条（Lines）拥有多种风格，org.eclipse.swt.SWT中提供了定义线条风格的常量，这些线条风格常量以LINE_开头。 

SWT.LINE_SOLID
SWT.LINE_DOT
SWT.LINE_DASH
SWT.LINE_DASHDOT
SWT.LINE_DASHDOTDOT

GC.setLineWidth(int width);

线条的默认宽度是1像素（pixel）, 当然也可以使用GC的lineWidth字段设置线条宽。

gc.setLineWidth(2);
gc.setLineWidth(4);

因为线条风格影响着所有的绘画操作，所以这也就使你可以画出不同边线风格的矩形或椭圆等图形。

gc.setLineWidth(3);
gc.drawOval(5,5,40,40);
gc.setLineWidth(1);
gc.setLineStyle(SWT.LINE_DOT);
gc.setForeground(display.getSystemColor(SWT.COLOR_BLUE));
gc.drawRectangle(60,5,60,40);

 

当GC的属性被改变，比如像线条的宽度、线条的风格或者是颜色，这些变化都会影响到后续的绘画操作。以上代码片段中，首先设置线条的宽度为3画了一个椭圆，随后重新设置线条属性画了一个边线是虚线的矩形。在SWT<span