dgiot_topo通道是影子设备与前端组态页面之间的桥

dgiot-topo

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

dgiot_topo通道是影子设备与前端组态页面之间的桥接通道， 实时订阅dgiot_task通道中解析成物模型的消息， 将物模型消息格式转换成knova组态json格式推送到前端组态页面，实现大屏上设备数据的实时更新

Homepage 演示地址 项目目录

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

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

已支持的功能列表 layout布局 文字编辑组件 图片编辑组件 画布放大缩小 画布右键菜单 图片下载 背景图支持 待实现的功能列表 工具类操作支持上一步下一步 图形组件 标记组件 画布多个元素组合 文字组件增加，字体丰富，透明度等。 画布参考线 画布多个尺寸，支持多平台 接入后台，实现登录，保存模板 项目架构

项目用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