可视化开发的心酸路 之 实现图元阶段一

实现一个图元流程

背景

考虑到我们采用的技术是vue,我们将来的目标是可迁移,什么意思呢?
我们为了迁移(升级为vue3.0或改为react)时做更少的事情,规划出了一个数据池,数据池不随框架的变化而改变。
我们画个图看下分层结构
这里我们分为三个层级:

  1. 前端
  2. 状态管理
  3. 数据池

可视化开发的心酸路 之 实现图元阶段一_第1张图片

前端层

这个前端层主要是构建前端页面。
git在线地址加载比较慢 https://chuxiaoguo.github.io/mita/#/
这里指的是菜单,工具栏,画布,配置栏,滚动条,快捷键,粘贴板等...

状态层

这里的状态其实就是vuex。
这一层的功能有以下几点:

  • 记录突变,为了后面历史的功能(撤销和重做)
  • 数据状态改变能够被追踪,便于调试
  • 相当于中间层的概念、

数据层

  1. 数据层定义了元素,页面,组件,母版等抽象类和工厂类
  2. 数据层有管理类,建造类,组合类
  3. 有数据唯一的入口
  4. 丰富的配置项

现在讲太多会太复杂,大概就是一个数据操作的仓库

定义第一个元素

下班了,明天接着写...

你可能感兴趣的:(vue.js,javascript,canvas,echarts,svg)