GEF 进阶，第一部分: Anchor

xyhsm

浏览: 20031 次
来自: ...

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Eclipse MVC 算法设计模式 IBM

第一部分: Anchor

GEF(Graphical Editing Framework)是Eclipse Tools的子项目，它在底层使用Draw2D作为布局和渲染引擎，在整体上使用MVC模式管理模型和视图。利用GEF，开发者可以从应用模型开始，迅速的构造一个可视化编辑环境。正如其名字所说，它只是一个框架，很多具体的事情仍然要靠开发者完成，但这也是GEF灵活的一方面，只要你掌握了相关的概念，你就可以对一个GEF应用进行充分的定制。本系列的目的就是介绍GEF的相关概念，并在GEF的一些示例程序的基础上演示如何定制、扩展自己的GEF应用。这是本系列的第一章，主要介绍了Anchor（锚点）的概念，以及如何自定义一个锚点并替代GEF缺省实现。

Anchor（锚点）

在一个典型的GEF程序中，我们通常会在画板上放上一些图形，然后用一些线连接这些图形。这些线的两个端点就是Anchor（锚点），而锚点所在的图形叫做锚点的Owner。更细化的说，一条线的起点叫做Source Anchor（源锚点），终结点叫做Target Anchor（目标锚点）。如图1中的黑色小方块所示。

图1. 源锚点和目标锚点

不难看出，锚点的具体位置和两个图形的位置以及连线的方式有关，这两个前提确定之后，锚点可以通过一定的方法计算得出。对于图1的情况，两个图形之间的连线是由两个图形的中心点确定的，那么锚点的计算方法就是找到这条中心线和图形边界的交点。Draw2D缺省为我们提供了一些Anchor的实现，最常用的大概是ChopboxAnchor，它只是简单的取两个图形的中心线和图形边界的交点做为锚点(正是图1 的情况）。对于简单的应用来说，ChopboxAnchor可以满足我们的需要，但是它的锚点计算方法导致锚点在任何时候都是唯一的，如果这两个图形之间存在多条连线，它们会相互重叠使得看上去只有一条，于是用户不可能用鼠标选择到被覆盖的连线。

解决这个问题的办法有两个：

1．提供一个自定义的Connection Router（连线路由器），以便能尽量避免线之间的重合，甚至也可以每条线都有不同的Router。

2．实现一个自定义的锚点，可以让用户自己拖动锚点到不同的位置，避免线之间的重合

对于方法1，我们在以后的系列中会有介绍。这里我们考虑方法2。

Shapes Example

GEF的Shapes示例是一个很基础的GEF程序，用户可以在其上放置椭圆和长方形的图形，然后可以用两种样式的线连接它们。由于其使用了ChopboxAnchor，它不支持在两个图形之间创建多条连线，也不能移动锚点。我们将在它的基础上实现一个可移动的锚点。

第一步，确定锚点的表示策略

设计自定义Anchor的第一个问题是"我想把什么位置做为Anchor？"，比如对于一个矩形，你可以选择图形的中心，或者四条边的中心，或者边界上的任何点。在我们这个例子里，我们希望是椭圆边界的任何点。因此我们可以考虑用角度来表示Anchor的位置，如图2所示：

图2. Anchor的表示方式

我们可以用一个变量表示角度，从而计算出中心射线与边界的交点，把这个交点作为图形的锚点。通过这样的方式，边界上的任一点都可以成为锚点，可以通过手工调整锚点，避免连线重叠。

第二步，修改Model

为了表示锚点，我们需要一个表示角度的变量，这个变量应该放到模型中以便能够把锚点信息记录到文件中。对于一条来说，它有两个锚点，所以应该在连线对象中添加两个成员，在Shapes例子中，连线对象是org.eclipse.gef.examples.shapes.model.Connection, 我们修改它添加两个成员和相应的Getter和Setter方法:

private double sourceAngle;
private double targetAngle;

public double getSourceAngle() {
	return sourceAngle;
}

public void setSourceAngle(double sourceAngle) {
	this.sourceAngle = sourceAngle;
}

public double getTargetAngle() {
	return targetAngle;
}

public void setTargetAngle(double targetAngle) {
	this.targetAngle = targetAngle;
}

sourceAngle保存了源锚点的角度，targetAngle保存了目标锚点的角度，使用弧度表示。

第三步，实现ConnectionAnchor接口

锚点的接口是由org.eclipse.draw2d.ConnectionAnchor定义的，我们需要实现这个接口，但是一般来说我们不用从头开始，可以通过继承其它类来减少我们的工作。由于存在椭圆和长方形两种图形，所以我们还需要实现两个子类。最终我们定义了基础类BorderAnchor和RectangleBorderAnchor，EllipseBorderAnchor两个子类。BorderAnchor的代码如下:

package org.eclipse.gef.examples.shapes.anchor;

import org.eclipse.draw2d.ChopboxAnchor;
import org.eclipse.draw2d.IFigure;
import org.eclipse.draw2d.geometry.Point;

public abstract class BorderAnchor extends ChopboxAnchor {
	protected double angle;
	
	public BorderAnchor(IFigure figure) {
		super(figure);
		angle = Double.MAX_VALUE;
	}
	
	public abstract Point getBorderPoint(Point reference);
	
	public Point getLocation(Point reference) {
		// 如果angle没有被初始化，使用缺省的ChopboxAnchor，否则计算一个边界锚点
		if(angle == Double.MAX_VALUE)
			return super.getLocation(reference);
		else
			return getBorderPoint(reference);
	}
	
	public double getAngle() {
		return angle;
	}

	public void setAngle(double angle) {
		this.angle = angle;
	}
}

重要的是getLocation()方法，它有一个参数"Point reference"，即一个参考点，在计算锚点时，我们可以根据参考点来决定锚点的位置，对于ChopboxAnchor来说，参考点就是另外一个图形的中心点。BorderAnchor类有一个angle成员，保存了锚点的角度，它会被初始化为Double.MAX_VALUE，所以我们判断angle是否等于Double.MAX_VALUE，如果是则BorderAnchor相当于一个ChopboxAnchor，如果否则调用一个抽象方法getBorderPoint()来计算我们的锚点。BorderAnchor的两个子类分别实现了计算椭圆和长方形锚点的算法，EllipseBorderAnchor的代码如下所示：

package org.eclipse.gef.examples.shapes.anchor;

import org.eclipse.draw2d.IFigure;
import org.eclipse.draw2d.geometry.Point;
import org.eclipse.draw2d.geometry.PrecisionPoint;
import org.eclipse.draw2d.geometry.Rectangle;

public class EllipseBorderAnchor extends BorderAnchor {
	public EllipseBorderAnchor(IFigure figure) {
		super(figure);
	}

	@Override
	public Point getBorderPoint(Point reference) {
		//得到owner矩形，转换为绝对坐标
		Rectangle r = Rectangle.SINGLETON;
		r.setBounds(getOwner().getBounds());
		getOwner().translateToAbsolute(r);
		
		// 椭圆方程和直线方程，解2元2次方程
		double a = r.width >> 1;
		double b = r.height >> 1;
		double k = Math.tan(angle);		
		double dx = 0.0, dy = 0.0;
		
		dx = Math.sqrt(1.0 / (1.0 / (a * a) + k * k / (b * b)));
		if(angle > Math.PI / 2 || angle < -Math.PI / 2)
			dx = -dx;
		dy = k * dx;
		
		// 得到椭圆中心点，加上锚点偏移，得到最终锚点坐标
		PrecisionPoint pp = new PrecisionPoint(r.getCenter());	
		pp.translate((int)dx, (int)dy);
		return new Point(pp);	
	}
}

值的注意的地方是我们可以通过getOwner().getBounds()来得到Owner的边界矩形，这是我们能够计算出锚点的重要前提。此外我们要注意的是必须把坐标转换为绝对坐标，这是通过getOwner().translateToAbsolute(r)来实现的。最后，我们返回了锚点的绝对坐标，中间的具体计算过程只不过是根据椭圆方程和射线方程求值而已。在我们的实现中，并没有用到参考点，如果你想有更多的变数，可以把参考点考虑进去。

同样，RectangleBorderAnchor也是如此，只不过求长方形边界点的方法稍微不一样而已，我们就不一一解释了，代码如下：

package org.eclipse.gef.examples.shapes.anchor;

import org.eclipse.draw2d.IFigure;
import org.eclipse.draw2d.geometry.Point;
import org.eclipse.draw2d.geometry.PrecisionPoint;
import org.eclipse.draw2d.geometry.Rectangle;

public class RectangleBorderAnchor extends BorderAnchor {

	public RectangleBorderAnchor(IFigure figure) {
		super(figure);
	}

	@Override
	public Point getBorderPoint(Point reference) {
		// 得到owner矩形，转换为绝对坐标
		Rectangle r = Rectangle.SINGLETON;
		r.setBounds(getOwner().getBounds());
		getOwner().translateToAbsolute(r);
		
		// 根据角度，计算锚点相对于owner中心点的偏移
		double dx = 0.0, dy = 0.0;
		double tan = Math.atan2(r.height, r.width);
		if(angle >= -tan && angle <= tan) {
			dx = r.width >> 1;
			dy = dx * Math.tan(angle);
		} else if(angle >= tan && angle <= Math.PI - tan) {
			dy = r.height >> 1;
			dx = dy / Math.tan(angle);
		} else if(angle <= -tan && angle >= tan - Math.PI) {
			dy = -(r.height >> 1);
			dx = dy / Math.tan(angle);
		} else {
			dx = -(r.width >> 1);
			dy = dx * Math.tan(angle);
		}

		// 得到长方形中心点，加上偏移，得到最终锚点坐标
		PrecisionPoint pp = new PrecisionPoint(r.getCenter());	
		pp.translate((int)dx, (int)dy);
		return new Point(pp);	
	}
}

这样我们就完成了自定义的锚点实现。在ConnectionAnchor接口中，还有其他4个方法，虽然我们没有用到，但是有必要了解一下它们：

void addAnchorListener(AnchorListener listener);
void removeAnchorListener(AnchorListener listener);
Point getReferencePoint();
IFigure getOwner();

addAnchorListener()和removeAnchorListener()可以添加或删除一个锚点监听器，这样我们可以知道锚点何时发生了移动。getOwner()则是返回锚点的Onwer图形，显然我们可以指定另外一个图形为锚点的Owner，虽然这种需求可能不太多。而getReferencePoint()则是返回一个参考点，要注意的是，这个参考点不是给自己用的，而是给另外一个锚点用的。比如对于源锚点来说，它会调用目标锚点的getReferencePoint()方法，而对于目标锚点来说，它会调用源锚点的getReferencePoint()方法。我们可以看看ChopboxAnchor的getReferencePoint()实现，它返回的就是它的Owner的中心。

第四步，修改EditPart

锚点实现完成后，我们需要修改ShapeEditPart使它能够使用我们定义的锚点。EditPart中的getSourceConnectionAnchor(ConnectionEditPart connection)和getTargetConnectionAnchor(ConnectionEditPart connection)是决定使用哪种锚点的关键方法。它们还有一个重载版本，用来处理Reconnect时的锚点更新。这四个方法我们都需要修改，同时为了减少对象创建的次数，我们可以在ConnectionEditPart里面添加两个成员用来保存源锚点对象和目标锚点对象，如下：

/* In ConnectionEditPart.java */

private BorderAnchor sourceAnchor;
private BorderAnchor targetAnchor;

public BorderAnchor getSourceAnchor() {
	return sourceAnchor;
}

public void setSourceAnchor(BorderAnchor sourceAnchor) {
	this.sourceAnchor = sourceAnchor;
}

public BorderAnchor getTargetAnchor() {
	return targetAnchor;
}

public void setTargetAnchor(BorderAnchor targetAnchor) {
	this.targetAnchor = targetAnchor;
}

这样的话，在ShapeEditPart中应该检查一下ConnectionEditPart中的成员是否有效，如果有效则直接返回，无效则创建一个新的锚点对象。而Reconnect时的代码稍微复杂一些，我们需要根据鼠标的当前位置，重新计算angle的值，鼠标的当前位置是包含在ReconnectRequest里面的。我们给出getSourceConnectionAnchor()的代码，对于getTargetConnectionAnchor()，只要将Source换成Target即可。

/* In ShapeEditPart.java */

/*
 * (non-Javadoc)
 * @see org.eclipse.gef.NodeEditPart#getSourceConnectionAnchor
 (org.eclipse.gef.ConnectionEditPart)
 */
public ConnectionAnchor getSourceConnectionAnchor
(ConnectionEditPart connection) {
	org.eclipse.gef.examples.shapes.parts.ConnectionEditPart con =
	(org.eclipse.gef.examples.shapes.parts.ConnectionEditPart)connection;
	BorderAnchor anchor = con.getSourceAnchor();
	if(anchor == null || anchor.getOwner() != getFigure()) {
		if(getModel() instanceof EllipticalShape)
			anchor = new EllipseBorderAnchor(getFigure());
		else if(getModel() instanceof RectangularShape)
			anchor = new RectangleBorderAnchor(getFigure());
		else
			throw new IllegalArgumentException("unexpected model");
		
		Connection conModel = (Connection)con.getModel();
		anchor.setAngle(conModel.getSourceAngle());
		con.setSourceAnchor(anchor);
	}
	return anchor;
}

/*
 * (non-Javadoc)
 * @see org.eclipse.gef.NodeEditPart#getSourceConnectionAnchor
 (org.eclipse.gef.Request)
 */
public ConnectionAnchor getSourceConnectionAnchor(Request request) {
	if(request instanceof ReconnectRequest) {
		ReconnectRequest r = (ReconnectRequest)request;
		org.eclipse.gef.examples.shapes.parts.ConnectionEditPart con =
		(org.eclipse.gef.examples.shapes.parts.ConnectionEditPart)r.
		getConnectionEditPart();
		Connection conModel = (Connection)con.getModel();
		BorderAnchor anchor = con.getSourceAnchor();
		GraphicalEditPart part = (GraphicalEditPart)r.getTarget();
		if(anchor == null || anchor.getOwner() != part.getFigure()) {
			if(getModel() instanceof EllipticalShape)
				anchor = new EllipseBorderAnchor(getFigure());
			else if(getModel() instanceof RectangleBorderAnchor)
				anchor = new RectangleBorderAnchor(getFigure());
			else
				throw new IllegalArgumentException("unexpected model");
			
			anchor.setAngle(conModel.getSourceAngle());
			con.setSourceAnchor(anchor);
		}
		
		Point loc = r.getLocation();
		Rectangle rect = Rectangle.SINGLETON;
		rect.setBounds(getFigure().getBounds());
		getFigure().translateToAbsolute(rect);
		Point ref = rect.getCenter();
		double dx = loc.x - ref.x;
		double dy = loc.y - ref.y;
		anchor.setAngle(Math.atan2(dy, dx));	
		conModel.setSourceAngle(anchor.getAngle());
		return anchor;		
	} else {
		if(getModel() instanceof EllipticalShape)
			return new EllipseBorderAnchor(getFigure());
		else if(getModel() instanceof RectangularShape)
			return new RectangleBorderAnchor(getFigure());
		else
			throw new IllegalArgumentException("unexpected model");
	}
}

到这里我们的修改就完成了，但是由于Shapes示例不允许创建多条连线，所以我们还需要把ConnectionCreateCommand和ConnectionReconnectCommand中的一些代码注释掉，这个内容就不做更多介绍了，大家可以下载本文附带的代码查看具体的修改。最终，我们修改后的Shapes可以创建多条连线，并且可以手动调整它们的锚点以避免重叠，如图3所示：

图3. 新的Shapes示例