Draw2D 教程（四）（五）（六）
原文：
- http://dev.csdn.net/author/ioriogami/02f1ca60584a47cf88f7da6bd53da025.html
- http://dev.csdn.net/author/ioriogami/da108320646d4bed926ab0468a3c97be.html
- http://dev.csdn.net/author/ioriogami/2fbcfae8b0ca4b85b327c362c94dba0c.html
4、使用Graphics来创建图形
在SWT中，graphic context(GC)可以单独创建为一个对象，也可以通过PaintEvent获得。但是在Draw2d中，Figure
可以从2.1节中讲述的那些paint方法中获得Graphics（方法参数）。Graphics的绝大多数方法都和CG中的相同，最大
的不同是Draw2d允许Graphics对象利用translate()方法移动。
然而，Draw2d提供了更为强大的功能来创建和操纵几何图形（Shapes）。它有好几个包、很多类用来处理几何图形。
4.1、使用Graphics类
如前所述，Graphics类的方法和SWT的GC基本一样，所以，在这一小节里，我们将创建图C.2种列出的那些组件，即
如下三种Figure：
1）DecisionFigure——即程序流程图中的分支结构，一个输入，两个输出（是/否）。
2）ProcessFigure——流程图中的某个处理，一个输入，一个输出。
3）TerminatorFigure——表示一个程序流程的开始或者结束，只有一个输入（结束）或输出（开始）。
对于我们的以上三种Figure，他们的大小由一个叫做size的变量来控制，他们上面显示的文字由一个叫做message
的String来设置。这些限制都来自于Figure对象的外部，所以暂时你还看不到。
这些类的代码如下：（列表C.3至C.5）
列表C.3：DecisionFigure.java
package com.swtjface.AppC;
import org.eclipse.draw2d.*;
import org.eclipse.draw2d.geometry.*;
public class DecisionFigure extends ActivityFigure
{
FixedAnchor inAnchor, yesAnchor, noAnchor;
public DecisionFigure()
{
inAnchor = new FixedAnchor(this);
inAnchor.place = new Point(1, 0);
targetAnchors.put("in_dec",inAnchor);
noAnchor = new FixedAnchor(this);
noAnchor.place = new Point(2, 1);
sourceAnchors.put("no",noAnchor);
yesAnchor = new FixedAnchor(this);
yesAnchor.place = new Point(1, 2);
sourceAnchors.put("yes",yesAnchor);
}
public void paintFigure(Graphics g)
{
Rectangle r = bounds;
PointList pl = new PointList(4);
pl.addPoint(r.x + r.width/2, r.y);
pl.addPoint(r.x, r.y + r.height/2);
pl.addPoint(r.x + r.width/2, r.y + r.height-1);
pl.addPoint(r.x + r.width, r.y + r.height/2);
g.drawPolygon(pl);
g.drawText(message, r.x+r.width/4+5, r.y+3*r.height/8);
g.drawText("N", r.x+7*r.width/8, r.y+3*r.height/8);
g.drawText("Y", r.x+r.width/2-2, r.y+3*r.height/4);
}
}
由于分支结构不是规则图形（它是个棱形），无法使用既有图形，所以我们需要指定一系列点来描绘它；谢天谢地，
ProcessFigure是一个矩形（Rectangle），所以容易创建地多。
列表C.4：ProcessFigure.java
package com.swtjface.AppC;
import org.eclipse.draw2d.*;
import org.eclipse.draw2d.geometry.*;
public class ProcessFigure extends ActivityFigure
{
FixedAnchor inAnchor, outAnchor;
public ProcessFigure()
{
inAnchor = new FixedAnchor(this);
inAnchor.place = new Point(1, 0);
targetAnchors.put("in_proc", inAnchor);
outAnchor = new FixedAnchor(this);
outAnchor.place = new Point(1, 2);
sourceAnchors.put("out_proc", outAnchor);
}
public void paintFigure(Graphics g)
{
Rectangle r = bounds;
g.drawText(message, r.x + r.width/4, r.y + r.height/4);
g.drawRectangle(r.x, r.y, r.width-1, r.height-1);
}
}
TerminatorFigure的左右两条边是圆弧，所以比ProcessFigure要麻烦点，但代码却是不难理解的。
列表C.5：TerminatorFigure.java
package com.swtjface.AppC;
import org.eclipse.draw2d.*;
import org.eclipse.draw2d.geometry.*;
public class TerminatorFigure extends ActivityFigure
{
FixedAnchor inAnchor, outAnchor;
public TerminatorFigure()
{
inAnchor = new FixedAnchor(this);
inAnchor.place = new Point(1, 0);
targetAnchors.put("in_term",inAnchor);
outAnchor = new FixedAnchor(this);
outAnchor.place = new Point(1, 2);
sourceAnchors.put("out_term",outAnchor);
}
public void paintFigure(Graphics g)
{
Rectangle r = bounds;
g.drawArc(r.x + r.width/8, r.y, r.width/4, r.height-1, 90, 180);
g.drawLine(r.x + r.width/4, r.y, r.x + 3*r.width/4, r.y);
g.drawLine(r.x + r.width/4, r.y + r.height-1, r.x + 3*r.width/4,
r.y + r.height-1);
g.drawArc(r.x + 5*r.width/8, r.y, r.width/4, r.height-1, 270, 180);
g.drawText(message, r.x+3*r.width/8, r.y+r.height/8);
}
}
显然，这些类不会只负责将图形画出来就完事了，还有两个更复杂的方面：一是这些Figure需要连接到其他的Figure
上去，这需要使用ConnectionAnchors（叫做FixedAnchors）。第二，这些图形将来在讲述GEF的时候还要用到，很
多方法现在解释还为时过早（作者这里主要指拖拽、编辑上面的文字等功能）。
由于所有这三个类都继承了ActivityFigure，所以现在该它登场了。这个基类包含上述三个Figure的共性。如列表
C.6所示，他的大部分方法用来跟踪Connections以及Connections的anchors。
列表C.6：ActivityFigure.java
package com.swtjface.AppC;
import org.eclipse.draw2d.*;
import org.eclipse.draw2d.geometry.*;
import java.util.*;
abstract public class ActivityFigure
extends Figure
{
Rectangle r = new Rectangle();
Hashtable targetAnchors = new Hashtable();
Hashtable sourceAnchors = new Hashtable();
String message = new String();
public void setName(String msg)
{
message = msg;
repaint();
}
public ConnectionAnchor ConnectionAnchorAt(Point p)
{
ConnectionAnchor closest = null;
long min = Long.MAX_VALUE;
Hashtable conn = getSourceConnectionAnchors();
conn.putAll(getTargetConnectionAnchors());
Enumeration e = conn.elements();
while (e.hasMoreElements())
{
ConnectionAnchor c = (ConnectionAnchor) e.nextElement();
Point p2 = c.getLocation(null);
long d = p.getDistance2(p2);
if (d < min)
{
min = d;
closest = c;
}
}
return closest;
}
public ConnectionAnchor getSourceConnectionAnchor(String name)
{
return (ConnectionAnchor)sourceAnchors.get(name);
}
public ConnectionAnchor getTargetConnectionAnchor(String name)
{
return (ConnectionAnchor)targetAnchors.get(name);
}
public String getSourceAnchorName(ConnectionAnchor c)
{
Enumeration enum = sourceAnchors.keys();
String name;
while (enum.hasMoreElements())
{
name = (String)enum.nextElement();
if (sourceAnchors.get(name).equals(c))
return name;
}
return null;
}
public String getTargetAnchorName(ConnectionAnchor c)
{
Enumeration enum = targetAnchors.keys();
String name = null;
while (enum.hasMoreElements())
{
name = (String)enum.nextElement();
if (targetAnchors.get(name).equals(c))
return name;
}
return null;
}
public ConnectionAnchor getSourceConnectionAnchorAt(Point p)
{
ConnectionAnchor closest = null;
long min = Long.MAX_VALUE;
Enumeration e = getSourceConnectionAnchors().elements();
while (e.hasMoreElements())
{
ConnectionAnchor c = (ConnectionAnchor) e.nextElement();
Point p2 = c.getLocation(null);
long d = p.getDistance2(p2);
if (d < min)
{
min = d;
closest = c;
}
}
return closest;
}
public Hashtable getSourceConnectionAnchors()
{
return sourceAnchors;
}
public ConnectionAnchor getTargetConnectionAnchorAt(Point p)
{
ConnectionAnchor closest = null;
long min = Long.MAX_VALUE;
Enumeration e = getTargetConnectionAnchors().elements();
while (e.hasMoreElements())
{
ConnectionAnchor c = (ConnectionAnchor) e.nextElement();
Point p2 = c.getLocation(null);
long d = p.getDistance2(p2);
if (d < min)
{
min = d;
closest = c;
}
}
return closest;
}
public Hashtable getTargetConnectionAnchors()
{
return targetAnchors;
}
}
对于ConnectionAnchor和Connection，我们将稍后再讨论。现在让我们看一下Draw2d的几何包。
4.2、Draw2d中的几何和图论
你已经看过如何使用Point和Rectangle，但Draw2d还提供了其他更多的类来处理几何图形。例如更高精度的类
PrecisionPoint，PrecisionRectangle，以及PrecisionDimension。此外还有Ray对象，其作用就像数学中的向量
一样；以及Transform类，用来实现移动、旋转、缩放等功能。
包org.eclipse.draw2d.graph里面有一些用来创建和分析有向图的工具类，例如基本的Node和Edge，以及特有的
布局管理器DirectedGraphLayout。图论已远超本书范围，但如果你对此有兴趣，这个包应该是很有用的。
Draw2d的Figure之间并非是用Edge连接的，而是用Connection，下面来讨论这个类。
5、理解Connection
在前面的代码里，我们不止一次地看到了FixedAnchor这个类，它继承了AbstractConnectionAnchor，使得你可
以可以给两个Figure之间添加连线。由于Connection创建组件之间的联系，所以它们在系统模型和图表中担任重要
角色。管理Connection以及它们的ConnectionAnchor比较复杂，因此理解它们的机制是非常重要的。
5.1、使用ConnectionAnchor
ConnectionAnchor并不可见，它只是指定Figure上的一个点，这个点可以接受Connection。你通过构造函数将
Figure传入，这个Figure叫做ConnectionAnchor的owner，而非parent。使用锚点（anchor）的难点不在于将它
关联到某个Figure，而是如何找准其位置，为此，我们需要重写ConnectionAnchor的getLocation()方法：
列表C.7：FixedAnchor.java
package com.swtjface.AppC;
import org.eclipse.draw2d.*;
import org.eclipse.draw2d.geometry.*;
public class FixedAnchor
extends AbstractConnectionAnchor
{
Point place;
public FixedAnchor(IFigure owner)
{
super(owner);
}
public Point getLocation(Point loc)
{
Rectangle r = getOwner().getBounds();
int x = r.x + place.x * r.width/2;
int y = r.y + place.y * r.height/2;
Point p = new PrecisionPoint(x,y);
getOwner().translateToAbsolute(p);
return p;
}
}
每当owner的位置变动时，getLocation()方法都会被调用。该方法返回的Point对象告诉GUI锚点应被置于何处。
在上例中，我们用getOwner()得到owner的边界，并且用了一个叫做place的成员变量，这个变量用比例的形式指明
锚点在owner中的位置。如此，就算Figure的大小改变，锚点仍能够被置于合适的位置上。
例如，我们想让DesisionFigure的入连接位于他的边界的顶部中点（即棱形的上顶点），那么会是这样：
inAnchor = new FixedAnchor(this);
inAnchor.place = new Point(1, 0);
这里，place被设置为(1,0)，即锚点将被放置在相对于Figure的边界水平方向的1/2，垂直方向的0/2处。
5.2、给GUI添加Connection
使用Connection要比使用其anchor容易一些，因为Draw2d框架负责画连接线。Draw2d对Connection接口的实现
是类PolylineConnection，我们的PathFigure则是它的子类：
列表C.8：PathFigure.java
package com.swtjface.AppC;
import org.eclipse.draw2d.*;
public class PathFigure extends PolylineConnection
{
public PathFigure()
{
setTargetDecoration(new PolylineDecoration());
setConnectionRouter(new ManhattanConnectionRouter());
}
}
当然，Connection不仅仅是一条连接线。我们需要设置它的起始和目标Figure，还可以设置它的外观以及经过的
路径，例如可以调用setSourceDecoration()或者setTargetDecoration()方法来设置两个端点的形状。在我们的
例子中，我们为Connection的目标端点创建了一个PolylineDecoration，看上去是个三角形箭头。
除了这些修饰符（decoration），你还可以使用ConnectionEndpointLocator来添加Label甚至其他的Figure。
这些对象通过一个Connection对象和一个boolean变量（该变量指明Figure被加在起始端还是目标端）创建；然后
用setVDistance()方法指定距离Connection的起始端点或目标端点的距离。
Connection的路径（router）指的是从一个锚点到另一个锚点所经过的路径。以下是AbstractConnectionRouter
的四个子类，列于表C.5
表C.5
在图C.2中（见第二部分），你可以看到，我们的PathFigure总是向右拐角，这是因为我们采用了ManhattanConnectionRouter。
请注意，如果你的LayeredPane包含有一个ConnectionLayer，你也可以用它来设置路径。
现在，我们理解了Draw2d的Figure和Connection，在最后，我们将这两者结合起来。
6、集成
现在，我们几乎可以动手来写flowchart的主类代码了。但在此之前，我们先来了解一下在Draw2d中如何实现对Figure
的拖拽。另外，我们还会加入一个FigureFactory类，专门用来创建Figure。
6.1、Draw2d的拖拽
我们前面提到过一些Draw2d中比较重要的listener和event，但里面没有像SWT中的DragSource、DropTarget那样含义
直观的类。这是因为在写本文的时候，Draw2d尚未加入该特性，所以，我们下面要讲的Dnd类，将依赖Figure本身的特性，
将自己移动到合适的位置。
列表C.9：Dnd.java
package com.swtjface.AppC;
import org.eclipse.draw2d.*;
import org.eclipse.draw2d.geometry.*;
public class Dnd extends MouseMotionListener.Stub
implements MouseListener
{
public Dnd(IFigure figure)
{
figure.addMouseMotionListener(this);
figure.addMouseListener(this);
}
Point start;
public void mouseReleased(MouseEvent e){}
public void mouseClicked(MouseEvent e){}
public void mouseDoubleClicked(MouseEvent e){}
public void mousePressed(MouseEvent e)
{
start = e.getLocation();
}
public void mouseDragged(MouseEvent e)
{
Point p = e.getLocation();
Dimension d = p.getDifference(start);
start = p;
Figure f = ((Figure)e.getSource());
f.setBounds(f.getBounds().getTranslated(d.width, d.height));
}
}
这个类继承了MouseMotionListener.Stub，这实际上是MouseMotionListener的一个空实现，使得你不必重写接口
MouseMotionListener内所有的方法。另外，由于我们需要在鼠标点击的时候做些事，所以实现了MouseListener接口。
6.2、使用FigureFactory创建Figure
我们将使用工厂模式来创建各个Figure，对应的类如下：
列表C.10：FigureFactory.java
package com.swtjface.AppC;
import org.eclipse.draw2d.IFigure;
public class FigureFactory
{
public static IFigure createTerminatorFigure()
{
return new TerminatorFigure();
}
public static IFigure createDecisionFigure()
{
return new DecisionFigure();
}
public static IFigure createProcessFigure()
{
return new ProcessFigure();
}
public static PathFigure createPathFigure()
{
return new PathFigure();
}
public static ChartFigure createChartFigure()
{
return new ChartFigure();
}
}
现在，我们已经创建了所有需要的Figure类以及生成它们的工厂，可以动手写可执行的主类了。
6.3、Flowchart类
最后的Flowchart如下：（译注：在这个类里，原作者并没有使用FigureFactory创建Figure，是疏漏）
列表C.11：Flowchart.java
package com.swtjface.AppC;
import org.eclipse.swt.widgets.*;
import org.eclipse.draw2d.*;
import org.eclipse.draw2d.geometry.*;
public class Flowchart
{
public static void main(String args[])
{
Shell shell = new Shell();
shell.setSize(200,300);
shell.open();
shell.setText("Flowchart");
LightweightSystem lws = new LightweightSystem(shell);
ChartFigure flowchart = new ChartFigure();
lws.setContents(flowchart);
TerminatorFigure start = new TerminatorFigure();
start.setName("Start");
start.setBounds(new Rectangle(40,20,80,20));
DecisionFigure dec = new DecisionFigure();
dec.setName("Should I?");
dec.setBounds(new Rectangle(30,60,100,60));
ProcessFigure proc = new ProcessFigure();
proc.setName("Do it!");
proc.setBounds(new Rectangle(40,140,80,40));
TerminatorFigure stop = new TerminatorFigure();
stop.setName("End");
stop.setBounds(new Rectangle(40,200,80,20));
PathFigure path1 = new PathFigure();
path1.setSourceAnchor(start.outAnchor);
path1.setTargetAnchor(dec.inAnchor);
PathFigure path2 = new PathFigure();
path2.setSourceAnchor(dec.yesAnchor);
path2.setTargetAnchor(proc.inAnchor);
PathFigure path3 = new PathFigure();
path3.setSourceAnchor(dec.noAnchor);
path3.setTargetAnchor(stop.inAnchor);
PathFigure path4 = new PathFigure();
path4.setSourceAnchor(proc.outAnchor);
path4.setTargetAnchor(stop.inAnchor);
flowchart.add(start);
flowchart.add(dec);
flowchart.add(proc);
flowchart.add(stop);
flowchart.add(path1);
flowchart.add(path2);
flowchart.add(path3);
flowchart.add(path4);
new Dnd(start);
new Dnd(proc);
new Dnd(dec);
new Dnd(stop);
Display display = Display.getDefault();
while (!shell.isDisposed())
{
if (!display.readAndDispatch())
display.sleep();
}
}
}
虽然这个类的代码较长，但很容易理解。首先，将ChartFigure加到LightweightSystem上，然后创建并初始化四个Figure，
它们通过PathFigure相连接。当所有的Figure都加到图上后，每个Figure都和一个Dnd对相关联，以提供鼠标拖拽功能。