`

Draw2d入门系列(三、实现Connection)

阅读更多
利用Draw2d中的Router、Anchor和Locator,可以实现多种连接样式。其中Router负责连接线的外观和操作方式,最简单的是设置Router为NULL(无 Router),这样会使用直线连接,其他连接方式包括折线、具有控制点的折线等,若想控制连接不互相交叉也需要在Router中做文章。

Anchor控制连线端点在图形上的位置,即“锚点”的位置,最易于使用的是ChopBoxAnchor,它先假设图形中心为连接点,然后计算这条假想连线与图形边缘的交汇点座位实际的锚点,其他Anchor,还有EllipseEAnchor、LabelAnchor和XYAnchor等。
Locator的作用是定位图形,例如希望在连接中点处以一个标签显示此链接的名称,就可以使用MidpointLocator来帮助定位这个标签,其他Locator还有ArrowLocator用于定位可旋转的修饰(Decoration,例如PolygonDecoration)、BendpointerLocator用于定位链接控制点、ConnectionEndpointLocator用于定位连接端点(通过制定uDistance和vDistance属性的值可以设置以端点为原点的坐标
实现简单图形的连接只要设置好连线的对应的锚点即可,下面是我给出的例子,通过PolylineConnection建立了node1和node2的连线,并且设置了node1和node2拖动的监听器,用户可以拖动图形到窗口的任意位置
package com.heming.draw2d.demo;

import org.eclipse.swt.widgets.Shell;
import org.eclipse.swt.widgets.Display;
import org.eclipse.draw2d.*;
import org.eclipse.draw2d.geometry.*;

/**
 * 连线的实现
 * 
 * @author 何明
 * 
 */
public class Connection {

	public static void main(String args[]) {
		Shell shell = new Shell();
		shell.setSize(350, 350);
		shell.open();
		shell.setText("Connection Demo");
		LightweightSystem lws = new LightweightSystem(shell);
		IFigure panel = new Figure();
		lws.setContents(panel);
		// 创建两个四边形的图形实例
		RectangleFigure node1 = new RectangleFigure(), node2 = new RectangleFigure();
		// 设置node1的背景色
		node1.setBackgroundColor(ColorConstants.red);
		// 设置node1的大小和位置
		node1.setBounds(new Rectangle(30, 30, 64, 36));

		// 设置node2的背景色
		node2.setBackgroundColor(ColorConstants.blue);
		// 设置node2的大小和位置
		node2.setBounds(new Rectangle(100, 100, 64, 36));

		// 创建一个连线的实例
		PolylineConnection conn = new PolylineConnection();
		// 设置连线起点的锚点
		conn.setSourceAnchor(new ChopboxAnchor(node1));
		// 设置连线目标的锚点
		conn.setTargetAnchor(new ChopboxAnchor(node2));
		// 设置连线目标的装饰器
		conn.setTargetDecoration(new PolygonDecoration());

		Label label = new Label("Midpoint");
		label.setOpaque(true);
		label.setBackgroundColor(ColorConstants.buttonLightest);
		label.setBorder(new LineBorder());

		// 添加连线的Locator
		conn.add(label, new MidpointLocator(conn, 0));

		// 在底层Figure中添加子Figure
		panel.add(node1);
		panel.add(node2);
		panel.add(conn);
		// 添加node1拖动的监听器
		new Dragger(node1);
		// 添加node2拖动的监听器
		new Dragger(node2);
		Display display = Display.getDefault();
		while (!shell.isDisposed()) {
			if (!display.readAndDispatch())
				display.sleep();
		}

	}
	
	/**
	 * 实现对图形的移动进行监听
	 * @author 何明
	 *
	 */
	static class Dragger extends MouseMotionListener.Stub implements MouseListener{

		public Dragger(IFigure figure){
			
			figure.addMouseMotionListener(this);
			
			figure.addMouseListener(this);
			
		}
		
		Point last;
		
		@Override
		public void mouseDoubleClicked(MouseEvent e) {
			
		}

		@Override
		public void mousePressed(MouseEvent e) {
			
			last = e.getLocation();
			
		}

		@Override
		public void mouseReleased(MouseEvent e) {
			
			
			
		}

		@Override
		public void mouseDragged(MouseEvent e) {

			Point p = e.getLocation();
			
			Dimension delta = p.getDifference(last);
			
			last = p; 
			
			Figure f = (Figure) e.getSource();
			
			//设置拖动的Figure的位置
			f.setBounds(f.getBounds().getTranslated(delta.width,delta.height));

		}
		
	}


}
分享到:
评论

相关推荐

    GEF/Draw2D入门例子

    **GEF/Draw2D入门教程** GEF(Graphical Editing Framework)和Draw2D是Eclipse项目中的两个核心组件,主要用于构建图形用户界面(GUI)特别是图形编辑工具。它们为开发者提供了强大的图形绘制和交互功能,使得创建...

    Draw2D 使用例子

    在IT领域,特别是图形用户界面(GUI)的开发中,Draw2D和GEF(Graphics Editing Framework)是两个重要的开源库,主要用于构建可定制的、交互式的2D图形编辑工具。下面将详细介绍这两个库以及如何在实际项目中使用...

    eclipse draw2d实例大全 源码

    eclipse draw2d实例大全 org.eclipse.draw2d.examples.cg org.eclipse.draw2d.examples.connections org.eclipse.draw2d.examples.graph org.eclipse.draw2d.examples.hittest org.eclipse.draw2d.examples.images ...

    draw2d 绘制图形教程

    - **图形对象**:draw2d提供了一系列预定义的图形对象,如矩形、圆形、多边形等,同时支持自定义形状。 - **连接线**:可以创建和编辑复杂的连接线,支持箭头、曲线等样式,用于表示关系或流程。 - **事件处理**...

    Draw2d js图形库

    3. **事件处理**:Draw2d.js支持图形对象的点击、拖动等事件监听,使得开发人员可以轻松地实现图形的交互逻辑。 4. **布局算法**:内置的布局算法能够自动排列图形,例如树形布局、网格布局等,使得复杂图表的组织...

    Java中如何使用Draw2D和SWT绘图

    Draw2D是Eclipse项目的一部分,它提供了一套丰富的API,可以方便地在 SWT 的 Composite 对象上进行绘图,减少了对第三方库的依赖。 Draw2D的核心概念包括Composite、轻量级系统和图形。Composite是SWT的基础组件,...

    Draw2D快速入门精简教程

    网上的Draw2D的参考资料实在是太少了,对于新手来说太不友好了,所以,我总结了一份只有10来页的PPT做为新手的快速入门教程。

    在Java中使用Draw2D和SWT绘图的源码

    当Draw2D与SWT结合使用时,可以在SWT的窗口或控件上绘制Draw2D图形,实现高度定制化的可视化效果。 在“在Java中使用Draw2D和SWT绘图的源码”中,我们可以学习如何将这两个库整合起来,创建动态的、交互式的2D图形...

    Draw2d 教程 很详细

    Draw2d是一个强大的图形绘制库,常用于在Java环境中创建二维图形用户界面。这个"Draw2d教程"可能包含了从基础到高级的各种概念和技术,帮助学习者深入理解如何利用Draw2d来构建交互式图形应用。以下是教程可能涵盖的...

    Draw2d画线例子

    在"Draw2d画线例子"中,我们将探讨如何利用Draw2d库来实现动态地在屏幕上绘制曲线图形。 首先,要使用Draw2d,你需要在Eclipse环境中设置好项目依赖。确保你已经安装了Eclipse IDE,并且导入了相关的插件如GEF...

    swt总结draw2d绘图

    Draw2D是SWT中的一个子项目,专门用于在SWT组件上进行图形绘制,提供了一组丰富的API,使得开发者可以创建出复杂的2D图形用户界面。本总结将深入探讨SWT和Draw2D在绘图方面的知识。 1. SWT基础: SWT是一个与操作...

    Draw2d Programmer Guide

    Draw2D是Eclipse平台下的一种轻量级图形用户界面工具包,它提供了一系列用于构建复杂图表、文档或绘图的功能组件,这些组件被称为“Figure”。不同于传统的GUI组件,Figure在操作系统级别上没有对应的资源,它们完全...

    draw2d 示例代码

    在提供的"org.eclipse.draw2d.examples"目录下,我们可以看到一系列示例代码,这些代码涵盖了Draw2d的主要功能和使用场景: 1. BasicShapesExample:展示了如何创建基本形状,如Rectangle、Ellipse、Line等,并对...

    Draw2D documents and samples

    无论是开发桌面应用程序还是Web应用,Draw2D都能提供强大的图形绘制支持,使得开发者能够专注于业务逻辑,而不是底层的图形实现细节。 在深入研究Draw2D时,需要注意以下几个关键点: 1. **理解基本图形对象和属性...

    使用Draw2d做的流程图工具

    Draw2d提供了一系列布局管理器,如StackLayout、TableLayout和FlowLayout,帮助自动调整图形元素的位置和大小,以适应不同场景的流程图布局需求。 4. **事件处理与交互**: 用户可以通过鼠标和键盘与流程图交互,...

    draw2d_Demo_code

    在代码中,我们可能会看到`IFigure`接口的实现,它是Draw2D中所有图形对象的基类。 2. **布局管理器**:在`Draw2DLayoutExample.java`中,布局管理器如`GridLayout`或`FlowLayout`被用来组织和调整图形对象的位置。...

    Draw2D UML Diagram

    Draw2D UML Diagram是一个用于创建UML类图的工具,通过源码驱动,能够帮助开发者高效地绘制出清晰、准确的类图,便于团队沟通和代码实现。本文将深入探讨Draw2D UML Diagram的使用,以及与其相关的源码解析。 首先...

    draw2d.js v2.9.1最新版本附带完整demo

    《draw2d.js v2.9.1:绘制工作流图的前端库解析与实践》 在当前数字化时代,工作流程图的可视化设计已经成为项目管理和协作的重要工具。Draw2D.js是一个专门用于创建和编辑二维图形的JavaScript库,特别适用于绘制...

    org.eclipse.draw2d.examples

    “draw2d”是Eclipse中用于2D图形绘制的库,而“examples”则意味着这个压缩包包含了一系列使用Draw2d的示例代码,用于教学和实践。 在【压缩包子文件的文件名称列表】中,我们看到只有一个条目 "org.eclipse.draw...

    DRAW2D中的 滚动条

    DRAW2D提供了一系列事件监听器接口,如MouseListener和MouseListenerAdapter,开发者可以通过这些接口实现自定义的事件处理逻辑。 5. **布局管理**:在DRAW2D中,你需要考虑如何合理地布局滚动条和视口,确保它们...

Global site tag (gtag.js) - Google Analytics