# vue2+konva-2D编辑器

**Repository Path**: lin_30_0/vue2-konva-2-d-editor

## Basic Information

- **Project Name**: vue2+konva-2D编辑器
- **Description**: vue2+konva-2D编辑器
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-25
- **Last Updated**: 2024-07-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<<<<<<< HEAD
#### 项目介绍

<p align="center">
  <img src="https://img.shields.io/github/commit-activity/m/dgiot/dgiot-konva-editior" alt="ommit-activity">
	<img src="https://badgen.net/badge/package/%40dgiot%2Fdgiot-konva-editior/blue"
	alt="package" maxretrytimes="3" class="m-1 transition-all duration-1000">
	<img src="https://badgen.net/npm/v/@dgiot/dgiot-konva-editior" alt="Npm Version"
	maxretrytimes="3" class="m-1 transition-all duration-1000">
	<img src="https://badgen.net/npm/node/@dgiot/dgiot-konva-editior" alt="Node Version"
	maxretrytimes="3" class="m-1 transition-all duration-1000">
	<br>
	<img src="https://badgen.net/jsdelivr/hits/npm/@dgiot/dgiot-konva-editior"
	alt="Jsdeliver Month Downloads" maxretrytimes="3" class="m-1 transition-all duration-1000">
	<img src="https://badgen.net/packagephobia/install/@dgiot/dgiot-konva-editior"
	alt="Install Size" maxretrytimes="3" class="m-1 transition-all duration-1000">
	<img src="https://badgen.net/npm/types/@dgiot/dgiot-konva-editior" alt="Type Support"
	maxretrytimes="3" class="m-1 transition-all duration-1000">
	<br>
	<img src="https://img.shields.io/librariesio/release/npm/@dgiot/dgiot-konva-editior"
	alt="Outdated Dep" maxretrytimes="3" class="m-1 transition-all duration-1000">
	<img src="https://img.shields.io/snyk/vulnerabilities/npm/@dgiot/dgiot-konva-editior"
	alt="Vulnerablities" maxretrytimes="3" class="m-1 transition-all duration-1000">
  <a href="https://www.npmjs.com/package/@dgiot/dgiot-konva-editior"><img src="https://img.shields.io/npm/l/@dgiot/dgiot-konva-editior" alt="License"></a>
<p>

##### 1.功能点

[dgiot-konva-editior](https://github.com/dgiot/dgiot-konva-editior)
是基于[konvajs](https://github.com/konvajs/konva) 和 [visual-drag-demo](https://github.com/woai3c/visual-drag-demo)
的一个低代码组态编辑器，靠拖拉拽生成页面。

###### dgiotTopo架构交互图

![https://dgiot-1253666439.cos.ap-shanghai-fsi.myqcloud.com/shuwa_tech/zh/frontend/dgiottopo/dgiot_topo/dgiot_topo.png](img.png)

###### 这是本项目具有的功能点如下

1. 编辑器
2. 自定义组件
3. 拖拽
4. 删除组件、调整图层层级
5. 放大缩小
6. 撤消、重做
7. 组件属性设置
8. 吸附
9. 预览、保存代码
10. 绑定事件
11. 绑定动画
12. 导入 PSD
13. 手机模式
14. 拖拽旋转
15. 复制粘贴剪切
16. 数据交互
17. 发布
18. 多个组件的组合和拆分
19. 文本组件
20. 矩形组件
21. 锁定组件
22. 快捷键
23. 网格线
24. 编辑器快照的另一种实现方式

##### 2.相关文档

1. [konva api](https://konvajs.org/api/Konva.html)
2. [konva github](https://github.com/konvajs/konva)

##### 3.效果预览

线上预览地址: [https://dgiot.github.io/dgiot-konva-editior](https://dgiot.github.io/dgiot-konva-editior) (dgiot-konva-editior)

#### 快速开始

##### 1.安装Node.js(建议12.x版本)

下载地址: [https://nodejs.org/zh-cn/download/](https://nodejs.org/zh-cn/download/)

##### 2.安装pnpm

```shell
npm i -g pnpm --registry=https://registry.npm.taobao.org
```

##### 4.初始化 & 开发

```shell
cd ./dgiot-konva-editior
// 初始化
pnpm install
// 开发
pnpm dev
```

> 建议使用`IntelliJ IDEA`或者`WebStorm`开发工具
=======
# vue2+konva-2D编辑器

#### 介绍
vue2+konva-2D编辑器

#### 软件架构
软件架构说明


#### 安装教程

1.  xxxx
2.  xxxx
3.  xxxx

#### 使用说明

1.  xxxx
2.  xxxx
3.  xxxx

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
>>>>>>> 934a32b0e3fc0c2e2610b350329ca21d8c25c133