《在混沌中寻找清醒，于深渊中仰望星空》

Draw2D Create Visio like drawings, diagrams or workflows in JavaScript and HTML5.

Draw2D is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs. Draw2D touch makes it easy to create visual languages & tools of various kinds.

The new source code home of Andreas Herz's http://www.draw2d.org project. New home because he switched the license to MIT.

Documentation https://freegroup.github.io/draw2d/index.html

介绍 draw2d_native 是基于 draw2d 核心框架进行精简与扩展的JavaScript图形库，专注于提供轻量、高效的交互式图形编辑能力。

未来规划

• 组合图形：计划新增多种预定义组合图形，方便快速构建复杂图表
• 动画特效：将添加丰富的动画效果，增强用户体验

项目简介

• 功能丰富：支持多种图形元素、连接线、拖拽操作、缩放等功能
• 易于使用：提供简洁的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);

示例

基本示例

查看项目根目录，了解基本的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 build:dev

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

项目结构

├── src/             # 源代码
│   ├── command/     # 命令类
│   ├── css/         # 样式文件
│   ├── decoration/  # 装饰器
│   ├── diyShape/    # 自定义图形
│   ├── geo/         # 几何类
│   ├── io/          # 输入输出
│   ├── layout/      # 布局类
│   ├── lib/         # 第三方库
│   ├── policy/      # 策略类
│   ├── shape/       # 图形元素
│   ├── Canvas.js    # 画布类
│   ├── Connection.js # 连接线类
│   ├── Figure.js    # 图形元素基类
│   ├── Port.js      # 端口类
│   └── 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.js 之上，特别感谢原开发者 Andreas Herz 的开创性工作和持续维护。Andreas Herz 凭借其卓越的技术洞察力和不懈的努力，创建了一个功能强大、设计优雅的图形框架，为无数开发者提供了便捷的图形编辑解决方案。他的贡献不仅在于代码本身，更在于他对开源精神的践行和对社区的无私奉献。

我们深知，没有 draw2d.js 的坚实基础，就不会有 draw2d_native 的诞生。在此，我们向 Andreas Herz 致以最崇高的敬意和最诚挚的感谢。

🪙 开源之基 本项目得益于以下优秀开源项目：

| 项目 | 作者 | 许可协议 | 用途 | |------|------|----------|------| | draw2d.js | Andreas Herz | MIT | 核心图形框架 | | Raphael.js | Dmitry Baranovskiy | MIT | 矢量渲染基础 |

特别向这些项目的维护者致敬，他们的工作让开源社区更加繁荣。正是因为有了这些优秀的开源项目，我们才能站在巨人的肩膀上，不断创新和进步。

我们也希望通过自己的努力，为开源社区贡献一份力量，让 draw2d_native 成为一个有价值的开源项目。

道友，点个 star 3️⃣

--- 见路不走，即见因果 ---