dgiot-topo

dgiot-topo 开源图片编辑器，采用Vue+JavaScript+Konva开发。

🏠 Homepage

✨ 演示地址

项目目录

.
├── konva
│   ├── canvas         //画布组件
│   ├── layout         //页面布局
│   ├── shape-panel    // 右侧面板
│   └── transformer-wrapper // 支持transformer高阶组件
├── components
│   ├── color-select   // 颜色选择器
│   ├── context-menu   // 右键菜单
│   ├── image          // 图片
│   ├── text           // 文本
│   ├── text-input     // 文本输入
│   └── toolbar        // 导航
├── store
│   └── index.js  // Vuex状态管理
├── pages
│   ├── index.less
│   └── index.tsx
├── styles
│   ├── index.less
│   └── theme
├── typing.ts
└── utils
    └── util.ts

功能特性

目前主要实现了简单的图片编辑，支持文字，图片等。

已支持的功能列表

• [x] layout布局
• [x] 文字编辑组件
• [x] 图片编辑组件
• [x] 画布放大缩小
• [x] 画布右键菜单
• [x] 图片下载
• [x] 背景图支持

待实现的功能列表

• [ ] 工具类操作支持上一步下一步
• [ ] 图形组件
• [ ] 标记组件
• [ ] 画布多个元素组合
• [ ] 文字组件增加，字体丰富，透明度等。
• [ ] 画布参考线
• [ ] 画布多个尺寸，支持多平台
• [ ] 接入后台，实现登录，保存模板

项目架构

项目用vue开发框架，采用javascript编写，图片编辑功能用的是konva,状态管理vuex,消息通讯dgiotBus。

技术栈 | 技术 | 说明 | 官网 | | ---- | ---- | ---- | | vue | 渐进式javascript框架 | https://vuejs.org/ | | konva | Konva.js - 适用于桌面/移动端应用的 HTML5 2d canvas 库. | https://konvajs.org/docs/index.html | | dgiotBus | dgiot 前端消息中间件 | https://github.com/dgiot/dgiotBus |

Installation

yarn add @dgiot/dgiot-topo

Quick Start

examples.vue

<template>
  <div id="app">
    +<dgiot-topo />
  </div>
</template>

<script>
+import DgiotTopo from '@dgiot/dgiot-topo/topo'
export default {
  name: 'App',
  components: {
    +DgiotTopo
  },
}
</script>

Online examples