Draw2d Pro Library

Draw2d Pro是一个功能强大的JavaScript拖拽库，用于创建交互式图形编辑器、流程图、UML图等可视化应用。

项目简介

• 功能丰富：支持多种图形元素、连接线、拖拽操作、缩放等功能
• 易于使用：提供简洁的API，方便快速集成和开发
• 高度可定制：支持自定义图形、样式和行为
• 跨浏览器兼容：支持主流现代浏览器

安装说明

方法1：直接引用

<script src="dist/draw2d_native.js"></script>

方法2：NPM安装

npm install draw2d_native

基本用法

创建画布

// 创建一个基本画布
var canvas = new draw2d.Canvas("canvas");

创建图形元素

// 创建一个矩形
var rect = new draw2d.shape.basic.Rectangle();
rect.setPosition(100, 100);
rect.setDimension(200, 100);
rect.setColor("#3498db");
rect.setStroke(2);

// 添加矩形到画布
canvas.add(rect);

// 创建一个圆形
var circle = new draw2d.shape.basic.Circle();
circle.setPosition(400, 200);
circle.setRadius(50);
circle.setColor("#e74c3c");

// 添加圆形到画布
canvas.add(circle);

创建连接线

// 创建一条连接线
var connection = new draw2d.Connection();
connection.setSource(rect.getOutputPort(0));
connection.setTarget(circle.getInputPort(0));

// 添加连接线到画布
canvas.add(connection);

高级功能

自定义图形

// 创建自定义图形
var MyShape = draw2d.shape.basic.Rectangle.extend({
    NAME: "MyShape",
    
    init: function() {
        this._super();
        this.setDimension(100, 100);
        this.setColor("#9b59b6");
    }
});

// 使用自定义图形
var myShape = new MyShape();
myShape.setPosition(200, 200);
canvas.add(myShape);

事件处理

// 监听图形移动事件
rect.on("move", function(event) {
    console.log("Rectangle moved to:", event.x, event.y);
});

// 监听连接创建事件
canvas.on("connect", function(event) {
    console.log("Connection created:", event.connection);
});

序列化和反序列化

// 序列化画布
var json = canvas.toJSON();
console.log(json);

// 反序列化画布
canvas.clear();
canvas.fromJSON(json);

示例

基本示例

查看 test.html 文件，了解基本的Draw2d库使用方法。

高级示例

流程图编辑器

// 创建流程图编辑器
var canvas = new draw2d.Canvas("canvas");

// 创建开始节点
var start = new draw2d.shape.node.Start();
start.setPosition(100, 50);
canvas.add(start);

// 创建任务节点
var task1 = new draw2d.shape.node.Task();
task1.setPosition(100, 150);
task1.setTitle("Task 1");
canvas.add(task1);

// 创建结束节点
var end = new draw2d.shape.node.End();
end.setPosition(100, 250);
canvas.add(end);

// 连接节点
var connection1 = new draw2d.Connection();
connection1.setSource(start.getOutputPort(0));
connection1.setTarget(task1.getInputPort(0));
canvas.add(connection1);

var connection2 = new draw2d.Connection();
connection2.setSource(task1.getOutputPort(0));
connection2.setTarget(end.getInputPort(0));
canvas.add(connection2);

API文档

核心类

• draw2d.Canvas：画布类，用于管理图形元素和交互
• draw2d.Figure：图形元素基类
• draw2d.Connection：连接线类
• draw2d.Port：端口类，用于连接图形元素

常用方法

Canvas类

• add(figure)：添加图形元素到画布
• remove(figure)：从画布中移除图形元素
• clear()：清空画布
• toJSON()：序列化画布
• fromJSON(json)：反序列化画布

Figure类

• setPosition(x, y)：设置图形位置
• setDimension(width, height)：设置图形尺寸
• setColor(color)：设置图形颜色
• setStroke(width)：设置图形边框宽度
• getInputPort(index)：获取输入端口
• getOutputPort(index)：获取输出端口

Connection类

• setSource(port)：设置连接源端口
• setTarget(port)：设置连接目标端口
• setRouter(router)：设置连接路由策略
• setStartDecorator(decorator)：设置连接起点装饰
• setEndDecorator(decorator)：设置连接终点装饰

开发指南

构建项目

# 安装依赖
npm install

# 构建项目
npm run build

# 开发模式（实时监听）
npm run dev

项目结构

├── src/             # 源代码
│   ├── lib/         # 第三方库
│   ├── shape/       # 图形元素
│   ├── policy/      # 策略类
│   ├── layout/      # 布局类
│   ├── command/     # 命令类
│   ├── util/        # 工具类
│   ├── io/          # 输入输出
│   ├── ui/          # UI组件
│   ├── diyShape/    # 自定义图形
│   └── index.js     # 入口文件
├── dist/            # 构建输出
├── webpack.config.js # webpack配置
└── package.json     # 项目配置

浏览器兼容性

• Chrome (最新版本)
• Firefox (最新版本)
• Safari (最新版本)
• Edge (最新版本)

许可证

本项目采用MIT许可证。详见 LICENSE 文件。

贡献指南

欢迎贡献代码、报告问题或提出建议！请遵循以下步骤：

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/amazing-feature)
3. 提交更改 (git commit -m 'Add some amazing feature')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 打开 Pull Request

联系方式

• 项目地址：https://gitee.com/NBegin/draw2d_native
• 问题反馈：https://gitee.com/NBegin/draw2d_native/issues

希望Draw2d Pro库能够帮助您创建出优秀的可视化应用！