# draw2d_native

**Repository Path**: NBegin/draw2d_native

## Basic Information

- **Project Name**: draw2d_native
- **Description**: draw2d_native 是基于 draw2d 核心框架进行精简与扩展的JavaScript图形库，专注于提供轻量、高效的交互式图形编辑能力。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-01-28
- **Last Updated**: 2026-03-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

 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：直接引用

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

### 方法2：NPM安装

```bash
npm install draw2d_native
```

## 基本用法

### 创建画布

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

### 创建图形元素

```javascript
// 创建一个矩形
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);
```

### 创建连接线

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

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

## 高级功能

### 自定义图形

```javascript
// 创建自定义图形
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);
```

### 事件处理

```javascript
// 监听图形移动事件
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);
});
```

### 序列化和反序列化

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

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

## 示例

### 基本示例

查看项目根目录，了解基本的Draw2d库使用方法。

### 高级示例

#### 流程图编辑器

```javascript
// 创建流程图编辑器
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)`：设置连接终点装饰

## 开发指南

### 构建项目

```bash
# 安装依赖
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](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️⃣ 

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