fabric封装，进行图片控制于与标记
npm install map-control
npm install map-control
`
在 main.js 中注册
`
import mapControl from "map-control";
Vue.use(mapControl);
`
在 vue 文件中使用
`
`
复制源码使用
将项目中的 components/map-control 拷贝到 vue2 项目中
引入 map-control.vue 进行使用，其中的引入路径请根据实际情况调整
`
import MapControl from "./components/map-control/map-control.vue";
export default {
components: { MapControl },
}
`
开发
环境 node 18.16.0
`bash
安装依赖
npm install
开发
npm run dev
打包
npm run build
发布
npm public
`
开发说明
本项目核心逻辑存在 components/map-control/modules 中
- ElcCanvas 封装 fabricjs 与创建画布的主类
- BaseElcNode 画布内节点的基类
- BaseComponent 逻辑插件的基类
- fabricUtils 一些工具方法
- （各类继承 BaseElecNode 的子类，特征为 Elc 开头，例如：ElcImage）
- （各类继承 BaseComponent 的逻辑插件，特征为 Component 结尾，例如：MovableComponent、MouseZoomComponent）
$3
自定义的节点继承这个类后，在绘制完成后调用这个节点的 create 方法，将自定的内容渲染到画布中。所以自定义节点`需要提供 getAllFNodes 方法，让 create 能够指导有多少个元素需要添加、添加到哪个图层上。