map-control

基于 vue2 封装 fabricjs 的组件

在线 demo

demo 地址

npm 包方式使用

安装依赖

npm install map-control

在 main.js 中注册

import mapControl from "map-control";
Vue.use(mapControl);

在 vue 文件中使用

<map-control></map-control>

复制源码使用

将项目中的 components/map-control 拷贝到 vue2 项目中

引入 map-control.vue 进行使用，其中的引入路径请根据实际情况调整

import MapControl from "./components/map-control/map-control.vue";
export default {
  components: { MapControl },
}

开发

环境 node 18.16.0

# 安装依赖
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）

BaseElcNode

自定义的节点继承这个类后，在绘制完成后调用这个节点的 create 方法，将自定的内容渲染到画布中。所以自定义节点需要提供 getAllFNodes 方法，让 create 能够指导有多少个元素需要添加、添加到哪个图层上。

相关资料

• fabric 中文教程
• fabric 案例 demo

tips

• 使用 fabric.Group 设置分组后，便如法单独编辑该分组下的元素