├── .browserslistrc
├── vue.config.js
├── demo.png
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── router
    │   └── index.js
    ├── App.vue
    ├── views
    │   └── Home.vue
    └── libs
    │   └── eraser_brush.mixin.js
├── .gitignore
├── .eslintrc.js
├── README.md
└── package.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     lintOnSave: false
3 | }


--------------------------------------------------------------------------------
/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CC4J/fabric-drawing-board/HEAD/demo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"],
3 | };
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CC4J/fabric-drawing-board/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CC4J/fabric-drawing-board/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import ElementUI from 'element-ui';
 3 | import 'element-ui/lib/theme-chalk/index.css';
 4 | import App from "./App.vue";
 5 | import router from "./router";
 6 | 
 7 | Vue.use(ElementUI);
 8 | 
 9 | Vue.config.productionTip = false;
10 | 
11 | new Vue({
12 |     router,
13 |     render: (h) => h(App),
14 | }).$mount("#app");


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import VueRouter from "vue-router";
 3 | import Home from "../views/Home.vue";
 4 | 
 5 | Vue.use(VueRouter);
 6 | 
 7 | const routes = [{
 8 |     path: "/",
 9 |     name: "Home",
10 |     component: Home,
11 | }];
12 | 
13 | const router = new VueRouter({
14 |     routes,
15 | });
16 | 
17 | export default router;


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     root: true,
 3 |     env: {
 4 |         node: true,
 5 |     },
 6 |     // extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
 7 |     parserOptions: {
 8 |         parser: "babel-eslint",
 9 |     },
10 |     rules: {
11 |         "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
12 |         "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
13 |     },
14 | };


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="less">
 8 | *{padding: 0;margin: 0;}
 9 | #app {
10 |   font-family: Avenir, Helvetica, Arial, sans-serif;
11 |   -webkit-font-smoothing: antialiased;
12 |   -moz-osx-font-smoothing: grayscale;
13 |   text-align: center;
14 |   color: #2c3e50;
15 | }
16 | 
17 | #nav {
18 |   padding: 30px;
19 | 
20 |   a {
21 |     font-weight: bold;
22 |     color: #2c3e50;
23 | 
24 |     &.router-link-exact-active {
25 |       color: #42b983;
26 |     }
27 |   }
28 | }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Author: your name
 3 |  * @Date: 2021-06-23 15:23:24
 4 |  * @LastEditTime: 2021-08-06 10:09:14
 5 |  * @LastEditors: Please set LastEditors
 6 |  * @Description: In User Settings Edit
 7 |  * @FilePath: \fabric-drawing-board\README.md
 8 | -->
 9 | # fabric-drawing-borard
10 | 
11 | use fabric to achievement drawing board and support free drawing, line, rect,cirlce,eraser,text,pan,scale,undo,redo,clear, save.
12 |   
13 | 使用fabric实现画板功能，支持画笔，绘制直线，矩形，圆形，文字，移动缩放画布，撤销重做，清屏与保存功能。
14 | 
15 | ![demo](https://github.com/CC4J/fabric-drawing-board/blob/master/demo.png?raw=true)
16 | 
17 | ## Project setup
18 | ```
19 | npm install
20 | ```
21 | 
22 | ### Compiles and hot-reloads for development
23 | ```
24 | npm run serve
25 | ```
26 | 
27 | ## Usage
28 | 
29 | ### npm package
30 | 
31 | ```
32 | npm install --save fabric-drawing-board
33 | 
34 | ```
35 | 
36 | ### Repo
37 | 
38 | - https://github.com/CC4J/fabric-drawing-board-plugin
39 | 
40 | ### npm package demo
41 | 
42 | - https://github.com/CC4J/fabric-drawing-board-plugin-demo


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "fabric-drawing-board",
 3 |     "version": "1.0.0",
 4 |     "private": true,
 5 |     "scripts": {
 6 |         "serve": "vue-cli-service serve",
 7 |         "build": "vue-cli-service build",
 8 |         "lint": "vue-cli-service lint"
 9 |     },
10 |     "dependencies": {
11 |         "core-js": "^3.6.5",
12 |         "element-ui": "^2.15.2",
13 |         "fabric": "^4.5.0",
14 |         "vue": "^2.6.11",
15 |         "vue-color": "^2.8.1",
16 |         "vue-router": "^3.2.0",
17 |         "vuex": "^3.4.0"
18 |     },
19 |     "devDependencies": {
20 |         "@vue/cli-plugin-babel": "~4.5.0",
21 |         "@vue/cli-plugin-eslint": "~4.5.0",
22 |         "@vue/cli-plugin-router": "~4.5.0",
23 |         "@vue/cli-plugin-vuex": "~4.5.0",
24 |         "@vue/cli-service": "~4.5.0",
25 |         "@vue/eslint-config-prettier": "^6.0.0",
26 |         "babel-eslint": "^10.1.0",
27 |         "eslint": "^6.7.2",
28 |         "eslint-plugin-prettier": "^3.3.1",
29 |         "eslint-plugin-vue": "^6.2.2",
30 |         "less": "^3.0.4",
31 |         "less-loader": "^5.0.0",
32 |         "prettier": "^2.2.1",
33 |         "vue-template-compiler": "^2.6.11"
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home">
  3 |     <div class="btnwrap">
  4 |       <div
  5 |         @click="showStrokeColorPicker = !showStrokeColorPicker"
  6 |         class="btn-color"
  7 |         ref="strokeColor"
  8 |       >
  9 |         <Sketch-picker
 10 |           v-if="showStrokeColorPicker"
 11 |           class="color-picker"
 12 |           :value="strokeColor"
 13 |           @input="updateStrokeColor"
 14 |         />
 15 |       </div>
 16 |       <span class="color-label">strokeColor</span>
 17 | 
 18 |       <div
 19 |         @click="showFillColorPicker = !showFillColorPicker"
 20 |         class="btn-color"
 21 |         ref="fillColor"
 22 |       >
 23 |         <Sketch-picker
 24 |           v-if="showFillColorPicker"
 25 |           class="color-picker"
 26 |           :value="fillColor"
 27 |           @input="updateFillColor"
 28 |         />
 29 |       </div>
 30 |       <span class="color-label">fillColor</span>
 31 | 
 32 |       <div
 33 |         @click="showBgColorPicker = !showBgColorPicker"
 34 |         class="btn-color"
 35 |         ref="bgColor"
 36 |       >
 37 |         <Sketch-picker
 38 |           v-if="showBgColorPicker"
 39 |           class="color-picker"
 40 |           :value="bgColor"
 41 |           @input="updateBgColor"
 42 |         />
 43 |       </div>
 44 |       <span class="color-label">bgColor</span>
 45 | 
 46 |       <div class="brushWidth">
 47 |         <label>lineSize:{{ lineSize }}</label>
 48 |         <input type="range" name="vol" min="1" max="100" v-model="lineSize" />
 49 |       </div>
 50 |       <div class="brushWidth">
 51 |         <label>fontSize:{{ fontSize }}</label>
 52 |         <input type="range" name="vol" min="18" max="50" v-model="fontSize" />
 53 |       </div>
 54 |       <button
 55 |         @click="tapToolBtn('brush')"
 56 |         :class="{ active: selectTool == 'brush' }"
 57 |         class="btn-tool"
 58 |       >
 59 |         pencil
 60 |       </button>
 61 |       <button
 62 |         @click="tapToolBtn('line')"
 63 |         :class="{ active: selectTool == 'line' }"
 64 |         class="btn-tool"
 65 |       >
 66 |         line
 67 |       </button>
 68 |       <button
 69 |         @click="tapToolBtn('rect')"
 70 |         :class="{ active: selectTool == 'rect' }"
 71 |         class="btn-tool"
 72 |       >
 73 |         rect
 74 |       </button>
 75 |       <button
 76 |         @click="tapToolBtn('circle')"
 77 |         :class="{ active: selectTool == 'circle' }"
 78 |         class="btn-tool"
 79 |       >
 80 |         circle
 81 |       </button>
 82 |       <button
 83 |         @click="tapToolBtn('text')"
 84 |         :class="{ active: selectTool == 'text' }"
 85 |         class="btn-tool"
 86 |       >
 87 |         text
 88 |       </button>
 89 |       <button
 90 |         @click="tapToolBtn('eraser')"
 91 |         :class="{ active: selectTool == 'eraser' }"
 92 |         class="btn-tool"
 93 |       >
 94 |         eraser
 95 |       </button>
 96 |       <button
 97 |         @click="tapToolBtn('move')"
 98 |         :class="{ active: selectTool == 'move' }"
 99 |         class="btn-tool"
100 |       >
101 |         move
102 |       </button>
103 |       <button @click="tapScaleBtn(-1)" class="btn-tool">zoom -</button>
104 |       <button @click="tapScaleBtn(1)" class="btn-tool">zoom +</button>
105 |       <button @click="tapHistoryBtn(-1)" class="btn-tool">undo</button>
106 |       <button @click="tapHistoryBtn(1)" class="btn-tool">redo</button>
107 | 
108 |       <button @click="tapClearBtn" class="btn-tool">clear</button>
109 |       <button @click="tapSaveBtn" class="btn-tool">save</button>
110 |     </div>
111 |     <canvas id="c" width="1200" height="800"></canvas>
112 |   </div>
113 | </template>
114 | 
115 | <script>
116 | // import { fabric } from "@/libs/fabric.min";
117 | import { fabric } from "fabric";
118 | import '@/libs/eraser_brush.mixin'
119 | import { Sketch } from "vue-color";
120 | export default {
121 |   name: "Home",
122 |   components: {
123 |     "Sketch-picker": Sketch,
124 |   },
125 |   data() {
126 |     return {
127 |       canvas: null, // fabric canvas对象
128 | 
129 |       strokeColor: "#000000", // 线框色
130 |       showStrokeColorPicker: false, // 是否显示 线框色选择器
131 | 
132 |       fillColor: "rgba(0,0,0,0)", // 填充色
133 |       showFillColorPicker: false, // 是否显示 填充色选择器
134 | 
135 |       bgColor: "#2F782C", // 背景色
136 |       showBgColorPicker: false, // 是否显示 背景色选择器
137 | 
138 |       lineSize: 1, // 线条大小 （线条 and 线框）
139 |       fontSize: 18, // 字体大小
140 | 
141 |       selectTool: "", // 当前用户选择的绘图工具 画笔：brush 直线：line 矩形：rect 圆形 circle 文本 text
142 | 
143 |       mouseFrom: {}, // 鼠标绘制起点
144 |       mouseTo: {}, // 鼠标绘制重点
145 | 
146 |       drawingObject: null, // 保存鼠标未松开时用户绘制的临时图像
147 | 
148 |       textObject: null, // 保存用户创建的文本对象
149 | 
150 |       isDrawing: false, // 当前是否正在绘制图形（画笔，文本模式除外）
151 |       stateArr: [], // 保存画布的操作记录
152 |       stateIdx: 0, // 当前操作步数
153 |       isRedoing: false // 当前是否在执行撤销或重做操作
154 |     };
155 |   },
156 |   watch: {
157 |     // 监听线条大小变化
158 |     lineSize() {
159 |       this.canvas.freeDrawingBrush.width = parseInt(this.lineSize, 10);
160 |       this.lineSize = parseInt(this.lineSize, 10);
161 |     },
162 |     // 监听背景色变化
163 |     bgColor() {
164 |       this.canvas.setBackgroundColor(this.bgColor, undefined, {
165 |         erasable: false,
166 |       });
167 |       this.canvas.renderAll();
168 |     },
169 |   },
170 |   methods: {
171 |     // 监听线框色选择器 颜色选择
172 |     updateStrokeColor(val) {
173 |       // 保存用户选择的线框色
174 |       this.strokeColor = val.hex;
175 |       // 修改当前选择的颜色指示
176 |       this.$refs.strokeColor.style.backgroundColor = this.strokeColor;
177 |     },
178 |     // 监听填充色选择器 颜色选择
179 |     updateFillColor(val) {
180 |       // 保存用户选择的线框色
181 |       this.fillColor = val.hex8;
182 |       // 修改当前选择的颜色指示
183 |       this.$refs.fillColor.style.backgroundColor = this.fillColor;
184 |     },
185 |     // 监听背景色选择器 颜色选择
186 |     updateBgColor(val) {
187 |       // 保存用户选择的背景色
188 |       this.bgColor = val.hex;
189 |       this.$refs.bgColor.style.backgroundColor = this.bgColor;
190 |     },
191 |     // 初始化画布
192 |     initCanvas() {
193 |       // 初始化线框色 与 指示器
194 |       this.strokeColor = "#000000";
195 |       this.$refs.strokeColor.style.backgroundColor = this.strokeColor;
196 |       // 初始化填充色 与 指示器
197 |       this.fillColor = "rgba(0,0,0,0)";
198 |       this.$refs.fillColor.style.backgroundColor = this.fillColor;
199 |       // 初始化背景色 与 指示器
200 |       this.bgColor = "#2F782C";
201 |       this.$refs.bgColor.style.backgroundColor = this.bgColor;
202 | 
203 |       // 初始化 fabric canvas对象
204 |       if (!this.canvas) {
205 |         this.canvas = new fabric.Canvas("c");
206 |         // 设置画布背景色 (背景色需要这样设置，否则拓展的橡皮功能会报错)
207 |         this.canvas.setBackgroundColor(this.bgColor, undefined, {
208 |           erasable: false,
209 |         });
210 |         // 设置背景色不受缩放与平移的影响
211 |         this.canvas.set("backgroundVpt", false);
212 |         // 禁止用户进行组选择
213 |         this.canvas.selection = false;
214 |         // 设置当前鼠标停留在
215 |         this.canvas.hoverCursor = "default";
216 |         // 重新渲染画布
217 |         this.canvas.renderAll();
218 |         // 记录画布原始状态
219 |         this.stateArr.push(JSON.stringify(this.canvas))
220 |         this.stateIdx = 0
221 |       }
222 |     },
223 |     // 初始化画布事件
224 |     initCanvasEvent() {
225 |       // 操作类型集合
226 |       let toolTypes = ["line", "rect", "circle", "text", "move"];
227 | 
228 |       // 监听鼠标按下事件
229 |       this.canvas.on("mouse:down", (options) => {
230 | 
231 |         if (this.selectTool != 'text' && this.textObject) {
232 |           // 如果当前存在文本对象，并且不是进行添加文字操作 则 退出编辑模式，并删除临时的文本对象
233 |           // 将当前文本对象退出编辑模式
234 |           this.textObject.exitEditing();
235 |           this.textObject.set("backgroundColor", "rgba(0,0,0,0)");
236 |           if (this.textObject.text == "") {
237 |             this.canvas.remove(this.textObject);
238 |           }
239 |           this.canvas.renderAll();
240 |           this.textObject = null;
241 |         }
242 |         // 判断当前是否选择了集合中的操作
243 |         if (toolTypes.indexOf(this.selectTool) != -1) {
244 |           // 记录当前鼠标的起点坐标 (减去画布在 x y轴的偏移，因为画布左上角坐标不一定在浏览器的窗口左上角)
245 |           this.mouseFrom.x = options.e.clientX - this.canvas._offset.left;
246 |           this.mouseFrom.y = options.e.clientY - this.canvas._offset.top;
247 |           // 判断当前选择的工具是否为文本
248 |           if (this.selectTool == "text") {
249 |             // 文本工具初始化
250 |             this.initText();
251 |           } else {
252 |             // 设置当前正在进行绘图 或 移动操作
253 |             this.isDrawing = true;
254 |           }
255 |         }
256 |       });
257 |       // 监听鼠标移动事件
258 |       this.canvas.on("mouse:move", (options) => {
259 |         // 如果当前正在进行绘图或移动相关操作
260 |         if (this.isDrawing) {
261 |           // 记录当前鼠标移动终点坐标 (减去画布在 x y轴的偏移，因为画布左上角坐标不一定在浏览器的窗口左上角)
262 |           this.mouseTo.x = options.e.clientX - this.canvas._offset.left
263 |           this.mouseTo.y = options.e.clientY - this.canvas._offset.top
264 |           switch (this.selectTool) {
265 |             case "line":
266 |               // 当前绘制直线，初始化直线绘制
267 |               this.initLine();
268 |               break;
269 |             case "rect":
270 |               // 初始化 矩形绘制
271 |               this.initRect();
272 |               break;
273 |             case "circle":
274 |               // 初始化 绘制圆形
275 |               this.initCircle();
276 |               break;
277 |             case "move":
278 |               // 初始化画布移动
279 |               this.initMove();
280 |           }
281 |         }
282 |       });
283 |       // 监听鼠标松开事件
284 |       this.canvas.on("mouse:up", () => {
285 |         // 如果当前正在进行绘图或移动相关操作
286 |         if (this.isDrawing) {
287 |           // 清空鼠标移动时保存的临时绘图对象
288 |           this.drawingObject = null;
289 |           // 重置正在绘制图形标志
290 |           this.isDrawing = false;
291 |           // 清空鼠标保存记录
292 |           this.resetMove();
293 |           // 如果当前进行的是移动操作，鼠标松开重置当前视口缩放系数
294 |           if (this.selectTool == "move") {
295 |             this.canvas.setViewportTransform(this.canvas.viewportTransform);
296 |           }
297 |         }
298 |       });
299 |       // 监听画布渲染完成
300 |       this.canvas.on("after:render", () => {
301 |         if (!this.isRedoing) {
302 |           // 当前不是进行撤销或重做操作
303 |           // 在绘画时会频繁触发该回调，所以间隔1s记录当前状态
304 |           if (this.recordTimer) {
305 |             clearTimeout(this.recordTimer)
306 |             this.recordTimer = null
307 |           }
308 |           this.recordTimer = setTimeout(() => {
309 |             this.stateArr.push(JSON.stringify(this.canvas))
310 |             this.stateIdx++
311 |           }, 100)
312 |         }else {
313 |           // 当前正在执行撤销或重做操作，不记录重新绘制的画布
314 |           this.isRedoing = false
315 |         }
316 |       })
317 |     },
318 |     // 初始化画笔工具
319 |     initBruch() {
320 |       // 设置绘画模式画笔类型为 铅笔类型
321 |       this.canvas.freeDrawingBrush = new fabric.PencilBrush(this.canvas);
322 |       // 设置画布模式为绘画模式
323 |       this.canvas.isDrawingMode = true;
324 |       // 设置绘画模式 画笔颜色与画笔线条大小
325 |       this.canvas.freeDrawingBrush.color = this.strokeColor;
326 |       this.canvas.freeDrawingBrush.width = parseInt(this.lineSize, 10);
327 |     },
328 |     // 初始化 绘制直线
329 |     initLine() {
330 |       // 根据保存的鼠标起始点坐标 创建直线对象
331 |       let canvasObject = new fabric.Line(
332 |         [
333 |           this.getTransformedPosX(this.mouseFrom.x),
334 |           this.getTransformedPosY(this.mouseFrom.y),
335 |           this.getTransformedPosX(this.mouseTo.x),
336 |           this.getTransformedPosY(this.mouseTo.y),
337 |         ],
338 |         {
339 |           fill: this.fillColor,
340 |           stroke: this.strokeColor,
341 |           strokeWidth: this.lineSize,
342 |         }
343 |       );
344 |       // 绘制 图形对象
345 |       this.startDrawingObject(canvasObject);
346 |     },
347 |     // 初始化 绘制矩形
348 |     initRect() {
349 |       // 计算矩形长宽
350 |       let left = this.getTransformedPosX(this.mouseFrom.x);
351 |       let top = this.getTransformedPosY(this.mouseFrom.y);
352 |       let width = this.mouseTo.x - this.mouseFrom.x;
353 |       let height = this.mouseTo.y - this.mouseFrom.y;
354 |       // 创建矩形 对象
355 |       let canvasObject = new fabric.Rect({
356 |         left: left,
357 |         top: top,
358 |         width: width,
359 |         height: height,
360 |         stroke: this.strokeColor,
361 |         fill: this.fillColor,
362 |         strokeWidth: this.lineSize,
363 |       });
364 |       // 绘制矩形
365 |       this.startDrawingObject(canvasObject);
366 |     },
367 |     // 初始化绘制圆形
368 |     initCircle() {
369 |       let left = this.getTransformedPosX(this.mouseFrom.x);
370 |       let top = this.getTransformedPosY(this.mouseFrom.y);
371 |       // 计算圆形半径
372 |       let radius =
373 |         Math.sqrt(
374 |           (this.getTransformedPosX(this.mouseTo.x) - left) *
375 |             (this.getTransformedPosY(this.mouseTo.x) - left) +
376 |             (this.getTransformedPosX(this.mouseTo.y) - top) *
377 |               (this.getTransformedPosY(this.mouseTo.y) - top)
378 |         ) / 2;
379 |       // 创建 原型对象
380 |       let canvasObject = new fabric.Circle({
381 |         left: left,
382 |         top: top,
383 |         stroke: this.strokeColor,
384 |         fill: this.fillColor,
385 |         radius: radius,
386 |         strokeWidth: this.lineSize,
387 |       });
388 |       // 绘制圆形对象
389 |       this.startDrawingObject(canvasObject);
390 |     },
391 |     // 初始化文本工具
392 |     initText() {
393 |       if (!this.textObject) {
394 |         // 当前不存在绘制中的文本对象
395 | 
396 |         // 创建文本对象
397 |         this.textObject = new fabric.Textbox("", {
398 |           left: this.getTransformedPosX(this.mouseFrom.x),
399 |           top: this.getTransformedPosY(this.mouseFrom.y),
400 |           fontSize: this.fontSize,
401 |           fill: this.strokeColor,
402 |           hasControls: false,
403 |           editable: true,
404 |           width: 30,
405 |           backgroundColor: "#fff",
406 |           selectable: false,
407 |         });
408 |         this.canvas.add(this.textObject);
409 |         // 文本打开编辑模式
410 |         this.textObject.enterEditing();
411 |         // 文本编辑框获取焦点
412 |         this.textObject.hiddenTextarea.focus();
413 |       } else {
414 |         // 将当前文本对象退出编辑模式
415 |         this.textObject.exitEditing();
416 |         this.textObject.set("backgroundColor", "rgba(0,0,0,0)");
417 |         if (this.textObject.text == "") {
418 |           this.canvas.remove(this.textObject);
419 |         }
420 |         this.canvas.renderAll();
421 |         this.textObject = null;
422 |         return;
423 |       }
424 |     },
425 |     // 初始化橡皮擦功能
426 |     initEraser() {
427 |       this.canvas.freeDrawingBrush = new fabric.EraserBrush(this.canvas);
428 |       this.canvas.freeDrawingBrush.width = parseInt(this.lineSize, 10);
429 |       this.canvas.isDrawingMode = true;
430 |     },
431 |     // 初始化画布移动
432 |     initMove() {
433 |       var vpt = this.canvas.viewportTransform;
434 |       vpt[4] += this.mouseTo.x - this.mouseFrom.x;
435 |       vpt[5] += this.mouseTo.y - this.mouseFrom.y;
436 |       this.canvas.requestRenderAll();
437 |       this.mouseFrom.x = this.mouseTo.x;
438 |       this.mouseFrom.y = this.mouseTo.y;
439 |     },
440 |     // 绘制图形
441 |     startDrawingObject(canvasObject) {
442 |       // 禁止用户选择当前正在绘制的图形
443 |       canvasObject.selectable = false;
444 |       // 如果当前图形已绘制，清除上一次绘制的图形
445 |       if (this.drawingObject) {
446 |         this.canvas.remove(this.drawingObject);
447 |       }
448 |       // 将绘制对象添加到 canvas中
449 |       this.canvas.add(canvasObject);
450 |       // 保存当前绘制的图形
451 |       this.drawingObject = canvasObject;
452 |     },
453 |     // 清空鼠标移动记录 （起点 与 终点）
454 |     resetMove() {
455 |       this.mouseFrom = {};
456 |       this.mouseTo = {};
457 |     },
458 |     // 绘图工具点击选择
459 |     tapToolBtn(tool) {
460 |       if (this.selectTool == tool) return;
461 |       // 保存当前选中的绘图工具
462 |       this.selectTool = tool;
463 | 
464 |       // 选择任何工具前进行一些重置工作
465 |       // 禁用画笔模式
466 |       this.canvas.isDrawingMode = false;
467 |       // 禁止图形选择编辑
468 |       let drawObjects = this.canvas.getObjects();
469 |       if (drawObjects.length > 0) {
470 |         drawObjects.map((item) => {
471 |           item.set("selectable", false);
472 |         });
473 |       }
474 |       if (this.selectTool == "brush") {
475 |         // 如果用户选择的是画笔工具，直接初始化，无需等待用户进行鼠标操作
476 |         this.initBruch();
477 |       } else if (this.selectTool == "eraser") {
478 |         // 如果用户选择的是橡皮擦工具，直接初始化，无需等待用户进行鼠标操作
479 |         this.initEraser();
480 |       }
481 |     },
482 |     // 缩放按钮点击
483 |     tapScaleBtn(flag) {
484 |       // flag -1 缩小 1 放大
485 |       let zoom = this.canvas.getZoom();
486 |       if (flag > 0) {
487 |         // 放大
488 |         zoom *= 1.1;
489 |       } else {
490 |         // 缩小
491 |         zoom *= 0.9;
492 |       }
493 |       // zoom 不能大于 20 不能小于0.01
494 |       zoom = zoom > 20 ? 20 : zoom;
495 |       zoom = zoom < 0.01 ? 0.01 : zoom;
496 |       this.canvas.setZoom(zoom);
497 |     },
498 |     // 撤销重做按钮点击
499 |     tapHistoryBtn(flag) {
500 |       this.isRedoing = true
501 | 
502 |       let stateIdx = this.stateIdx + flag
503 |       // 判断是否已经到了第一步操作
504 |       if (stateIdx < 0) return;
505 |       // 判断是否已经到了最后一步操作
506 |       if (stateIdx >= this.stateArr.length) return;
507 |       if (this.stateArr[stateIdx]) {
508 |         this.canvas.loadFromJSON(this.stateArr[stateIdx])
509 |         if (this.canvas.getObjects().length > 0) {
510 |           this.canvas.getObjects().forEach(item => {
511 |             item.set('selectable', false)
512 |           })
513 |         }
514 |         this.stateIdx = stateIdx
515 |       }
516 |     },
517 |     // 监听画布重新绘制
518 |     tapClearBtn() {
519 |       let children = this.canvas.getObjects()
520 |       if (children.length > 0) {
521 |         this.canvas.remove(...children)
522 |       }
523 |     },
524 |     // 保存按钮点击
525 |     tapSaveBtn() {
526 |       this.canvas.clone(cvs => {
527 |         //遍历所有对对象，获取最小坐标，最大坐标
528 |         let top = 0
529 |         let left = 0
530 |         let width = this.canvas.width
531 |         let height = this.canvas.height
532 | 
533 |         var objects = cvs.getObjects();
534 |         if(objects.length > 0 ){
535 |           var rect = objects[0].getBoundingRect();
536 |           var minX = rect.left;
537 |           var minY = rect.top;
538 |           var maxX = rect.left + rect.width;
539 |           var maxY = rect.top + rect.height;
540 |           for(var i = 1; i<objects.length; i++){
541 |             rect = objects[i].getBoundingRect();
542 |             minX = Math.min(minX, rect.left);
543 |             minY= Math.min(minY, rect.top);
544 |             maxX = Math.max(maxX, rect.left + rect.width);
545 |             maxY= Math.max(maxY, rect.top + rect.height);
546 |           }
547 |           top = minY - 100
548 |           left = minX - 100
549 |           width = maxX - minX + 200
550 |           height = maxY - minY + 200
551 |           cvs.sendToBack(new fabric.Rect({
552 |             left,
553 |             top,
554 |             width,
555 |             height,
556 |             stroke: 'rgba(0,0,0,0)',
557 |             fill: this.bgColor,
558 |             strokeWidth: 0
559 |           }))
560 |         }
561 |         const dataURL = cvs.toDataURL({
562 |           format: 'png',
563 |           multiplier: cvs.getZoom(),
564 |           left,
565 |           top,
566 |           width,
567 |           height
568 |         });
569 |         const link = document.createElement('a');
570 |         link.download = 'canvas.png';
571 |         link.href = dataURL;
572 |         document.body.appendChild(link);
573 |         link.click();
574 |         document.body.removeChild(link);
575 |       })
576 |     },
577 |     // 计算画布移动之后的x坐标点
578 |     getTransformedPosX(x) {
579 |       let zoom = Number(this.canvas.getZoom())
580 |       return (x - this.canvas.viewportTransform[4]) / zoom;
581 |     },
582 |     getTransformedPosY(y) {
583 |       let zoom = Number(this.canvas.getZoom())
584 |       return (y - this.canvas.viewportTransform[5]) / zoom;
585 |     },
586 |   },
587 |   mounted() {
588 |     // 初始化 画布
589 |     this.initCanvas();
590 |     // 默认开启画笔模式
591 |     this.tapToolBtn("brush");
592 |     // 初始化 画布 事件
593 |     this.initCanvasEvent();
594 |   },
595 | };
596 | </script>
597 | <style lang="less" scoped>
598 | .home {
599 |   overflow: hidden;
600 |   height: 100vh;
601 | }
602 | .btnwrap {
603 |   height: 50px;
604 |   display: flex;
605 |   align-items: center;
606 |   .btn-color {
607 |     width: 40px;
608 |     height: 40px;
609 |     position: relative;
610 |     border: 1px solid #999;
611 |     margin-left: 20px;
612 |     .color-picker {
613 |       position: absolute;
614 |       left: 0;
615 |       top: 40px;
616 |       z-index: 1000;
617 |     }
618 |   }
619 |   .color-label {
620 |     padding-left: 4px;
621 |   }
622 | 
623 |   .brushWidth {
624 |     margin-left: 10px;
625 |   }
626 | 
627 |   .btn-tool {
628 |     margin-left: 10px;
629 |     padding: 0 4px;
630 |     &:hover {
631 |       cursor: pointer;
632 |     }
633 |     &.active {
634 |       background: #2962ff;
635 |       color: #fff;
636 |       border-color: #2962ff;
637 |     }
638 |   }
639 | }
640 | </style>
641 | 


--------------------------------------------------------------------------------
/src/libs/eraser_brush.mixin.js:
--------------------------------------------------------------------------------
  1 | (function() {
  2 |     /** ERASER_START */
  3 |     var __setBgOverlayColor = fabric.StaticCanvas.prototype.__setBgOverlayColor;
  4 |     var ___setBgOverlay = fabric.StaticCanvas.prototype.__setBgOverlay;
  5 |     var __setSVGBgOverlayColor = fabric.StaticCanvas.prototype._setSVGBgOverlayColor;
  6 |     fabric.util.object.extend(fabric.StaticCanvas.prototype, {
  7 |         backgroundColor: undefined,
  8 |         overlayColor: undefined,
  9 |         /**
 10 |          * Create Rect that holds the color to support erasing
 11 |          * patches {@link CommonMethods#_initGradient}
 12 |          * @private
 13 |          * @param {'bakground'|'overlay'} property
 14 |          * @param {(String|fabric.Pattern|fabric.Rect)} color Color or pattern or rect (in case of erasing)
 15 |          * @param {Function} callback Callback to invoke when color is set
 16 |          * @param {Object} options
 17 |          * @return {fabric.Canvas} instance
 18 |          * @chainable true
 19 |          */
 20 |         __setBgOverlayColor: function(property, color, callback, options) {
 21 |             if (color && color.isType && color.isType('rect')) {
 22 |                 // color is already an object
 23 |                 this[property] = color;
 24 |                 color.set(options);
 25 |                 callback && callback(this[property]);
 26 |             } else {
 27 |                 var _this = this;
 28 |                 var cb = function() {
 29 |                     _this[property] = new fabric.Rect(fabric.util.object.extend({
 30 |                         width: _this.width,
 31 |                         height: _this.height,
 32 |                         fill: _this[property],
 33 |                     }, options));
 34 |                     callback && callback(_this[property]);
 35 |                 };
 36 |                 __setBgOverlayColor.call(this, property, color, cb);
 37 |                 //  invoke cb in case of gradient
 38 |                 //  see {@link CommonMethods#_initGradient}
 39 |                 if (color && color.colorStops && !(color instanceof fabric.Gradient)) {
 40 |                     cb();
 41 |                 }
 42 |             }
 43 | 
 44 |             return this;
 45 |         },
 46 | 
 47 |         setBackgroundColor: function(backgroundColor, callback, options) {
 48 |             return this.__setBgOverlayColor('backgroundColor', backgroundColor, callback, options);
 49 |         },
 50 | 
 51 |         setOverlayColor: function(overlayColor, callback, options) {
 52 |             return this.__setBgOverlayColor('overlayColor', overlayColor, callback, options);
 53 |         },
 54 | 
 55 |         /**
 56 |          * patch serialization - from json
 57 |          * background/overlay properties could be objects if parsed by this mixin or could be legacy values
 58 |          * @private
 59 |          * @param {String} property Property to set (backgroundImage, overlayImage, backgroundColor, overlayColor)
 60 |          * @param {(Object|String)} value Value to set
 61 |          * @param {Object} loaded Set loaded property to true if property is set
 62 |          * @param {Object} callback Callback function to invoke after property is set
 63 |          */
 64 |         __setBgOverlay: function(property, value, loaded, callback) {
 65 |             var _this = this;
 66 | 
 67 |             if ((property === 'backgroundColor' || property === 'overlayColor') &&
 68 |                 (value && typeof value === 'object' && value.type === 'rect')) {
 69 |                 fabric.util.enlivenObjects([value], function(enlivedObject) {
 70 |                     _this[property] = enlivedObject[0];
 71 |                     loaded[property] = true;
 72 |                     callback && callback();
 73 |                 });
 74 |             } else {
 75 |                 ___setBgOverlay.call(this, property, value, loaded, callback);
 76 |             }
 77 |         },
 78 | 
 79 |         /**
 80 |          * patch serialization - to svg
 81 |          * background/overlay properties could be objects if parsed by this mixin or could be legacy values
 82 |          * @private
 83 |          */
 84 |         _setSVGBgOverlayColor: function(markup, property, reviver) {
 85 |             var filler = this[property + 'Color'];
 86 |             if (filler && filler.isType && filler.isType('rect')) {
 87 |                 var excludeFromExport = filler.excludeFromExport || (this[property] && this[property].excludeFromExport);
 88 |                 if (filler && !excludeFromExport && filler.toSVG) {
 89 |                     markup.push(filler.toSVG(reviver));
 90 |                 }
 91 |             } else {
 92 |                 __setSVGBgOverlayColor.call(this, markup, property, reviver);
 93 |             }
 94 |         },
 95 | 
 96 |         /**
 97 |          * @private
 98 |          * @param {CanvasRenderingContext2D} ctx Context to render on
 99 |          * @param {string} property 'background' or 'overlay'
100 |          */
101 |         _renderBackgroundOrOverlay: function(ctx, property) {
102 |             var fill = this[property + 'Color'],
103 |                 object = this[property + 'Image'],
104 |                 v = this.viewportTransform,
105 |                 needsVpt = this[property + 'Vpt'];
106 |             if (!fill && !object) {
107 |                 return;
108 |             }
109 |             if (fill || object) {
110 |                 ctx.save();
111 |                 if (needsVpt) {
112 |                     ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
113 |                 }
114 |                 fill && fill.render(ctx);
115 |                 object && object.render(ctx);
116 |                 ctx.restore();
117 |             }
118 |         },
119 |     });
120 | 
121 |     var _toObject = fabric.Object.prototype.toObject;
122 |     var __createBaseSVGMarkup = fabric.Object.prototype._createBaseSVGMarkup;
123 |     fabric.util.object.extend(fabric.Object.prototype, {
124 |         /**
125 |          * Indicates whether this object can be erased by {@link fabric.EraserBrush}
126 |          * @type boolean
127 |          * @default true
128 |          */
129 |         erasable: true,
130 | 
131 |         /**
132 |          *
133 |          * @returns {fabric.Group | null}
134 |          */
135 |         getEraser: function() {
136 |             return this.clipPath && this.clipPath.eraser ? this.clipPath : null;
137 |         },
138 | 
139 |         /**
140 |          * Returns an object representation of an instance
141 |          * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
142 |          * @return {Object} Object representation of an instance
143 |          */
144 |         toObject: function(additionalProperties) {
145 |             return _toObject.call(this, ['erasable'].concat(additionalProperties));
146 |         },
147 | 
148 |         /**
149 |          * use <mask> to achieve erasing for svg
150 |          * credit: https://travishorn.com/removing-parts-of-shapes-in-svg-b539a89e5649
151 |          * @param {Function} reviver
152 |          * @returns {string} markup
153 |          */
154 |         eraserToSVG: function(options) {
155 |             var eraser = this.getEraser();
156 |             if (eraser) {
157 |                 var fill = eraser._objects[0].fill;
158 |                 eraser._objects[0].fill = 'white';
159 |                 eraser.clipPathId = 'CLIPPATH_' + fabric.Object.__uid++;
160 |                 var commons = [
161 |                     'id="' + eraser.clipPathId + '"',
162 |                     /*options.additionalTransform ? ' transform="' + options.additionalTransform + '" ' : ''*/
163 |                 ].join(' ');
164 |                 var objectMarkup = ['<defs>', '<mask ' + commons + ' >', eraser.toSVG(options.reviver), '</mask>', '</defs>'];
165 |                 eraser._objects[0].fill = fill;
166 |                 return objectMarkup.join('\n');
167 |             }
168 |             return '';
169 |         },
170 | 
171 |         /**
172 |          * use <mask> to achieve erasing for svg, override <clipPath>
173 |          * @param {string[]} objectMarkup
174 |          * @param {Object} options
175 |          * @returns
176 |          */
177 |         _createBaseSVGMarkup: function(objectMarkup, options) {
178 |             var eraser = this.getEraser();
179 |             if (eraser) {
180 |                 var eraserMarkup = this.eraserToSVG(options);
181 |                 this.clipPath = null;
182 |                 var markup = __createBaseSVGMarkup.call(this, objectMarkup, options);
183 |                 this.clipPath = eraser;
184 |                 return [
185 |                     eraserMarkup,
186 |                     markup.replace('>', 'mask="url(#' + eraser.clipPathId + ')" >')
187 |                 ].join('\n');
188 |             } else {
189 |                 return __createBaseSVGMarkup.call(this, objectMarkup, options);
190 |             }
191 |         }
192 |     });
193 | 
194 |     var _groupToObject = fabric.Group.prototype.toObject;
195 |     fabric.util.object.extend(fabric.Group.prototype, {
196 |         /**
197 |          * Returns an object representation of an instance
198 |          * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
199 |          * @return {Object} Object representation of an instance
200 |          */
201 |         toObject: function(additionalProperties) {
202 |             return _groupToObject.call(this, ['eraser'].concat(additionalProperties));
203 |         }
204 |     });
205 | 
206 |     fabric.util.object.extend(fabric.Canvas.prototype, {
207 |         /**
208 |          * Used by {@link #renderAll}
209 |          * @returns boolean
210 |          */
211 |         isErasing: function() {
212 |             return (
213 |                 this.isDrawingMode &&
214 |                 this.freeDrawingBrush &&
215 |                 this.freeDrawingBrush.type === 'eraser' &&
216 |                 this.freeDrawingBrush._isErasing
217 |             );
218 |         },
219 | 
220 |         /**
221 |          * While erasing, the brush is in charge of rendering the canvas
222 |          * It uses both layers to achieve diserd erasing effect
223 |          *
224 |          * @returns fabric.Canvas
225 |          */
226 |         renderAll: function() {
227 |             if (this.contextTopDirty && !this._groupSelector && !this.isDrawingMode) {
228 |                 this.clearContext(this.contextTop);
229 |                 this.contextTopDirty = false;
230 |             }
231 |             // while erasing the brush is in charge of rendering the canvas so we return
232 |             if (this.isErasing()) {
233 |                 this.freeDrawingBrush._render();
234 |                 return;
235 |             }
236 |             if (this.hasLostContext) {
237 |                 this.renderTopLayer(this.contextTop);
238 |             }
239 |             var canvasToDrawOn = this.contextContainer;
240 |             this.renderCanvas(canvasToDrawOn, this._chooseObjectsToRender());
241 |             return this;
242 |         }
243 |     });
244 | 
245 | 
246 |     /**
247 |      * EraserBrush class
248 |      * Supports selective erasing meaning that only erasable objects are affected by the eraser brush.
249 |      * In order to support selective erasing all non erasable objects are rendered on the main/bottom ctx
250 |      * while the entire canvas is rendered on the top ctx.
251 |      * Canvas bakground/overlay image/color are handled as well.
252 |      * When erasing occurs, the path clips the top ctx and reveals the bottom ctx.
253 |      * This achieves the desired effect of seeming to erase only erasable objects.
254 |      * After erasing is done the created path is added to all intersected objects' `clipPath` property.
255 |      *
256 |      *
257 |      * @class fabric.EraserBrush
258 |      * @extends fabric.PencilBrush
259 |      */
260 |     fabric.EraserBrush = fabric.util.createClass(
261 |         fabric.PencilBrush,
262 |         /** @lends fabric.EraserBrush.prototype */
263 |         {
264 |             type: 'eraser',
265 | 
266 |             /**
267 |              * Indicates that the ctx is ready and rendering can begin.
268 |              * Used to prevent a race condition caused by {@link fabric.EraserBrush#onMouseMove} firing before {@link fabric.EraserBrush#onMouseDown} has completed
269 |              *
270 |              * @private
271 |              */
272 |             _ready: false,
273 | 
274 |             /**
275 |              * @private
276 |              */
277 |             _drawOverlayOnTop: false,
278 | 
279 |             /**
280 |              * @private
281 |              */
282 |             _isErasing: false,
283 | 
284 |             initialize: function(canvas) {
285 |                 this.callSuper('initialize', canvas);
286 |                 this._renderBound = this._render.bind(this);
287 |                 this.render = this.render.bind(this);
288 |             },
289 | 
290 |             /**
291 |              * Used to hide a drawable from the rendering process
292 |              * @param {fabric.Object} object
293 |              */
294 |             hideObject: function(object) {
295 |                 if (object) {
296 |                     object._originalOpacity = object.opacity;
297 |                     object.set({ opacity: 0 });
298 |                 }
299 |             },
300 | 
301 |             /**
302 |              * Restores hiding an object
303 |              * {@link fabric.EraserBrush#hideObject}
304 |              * @param {fabric.Object} object
305 |              */
306 |             restoreObjectVisibility: function(object) {
307 |                 if (object && object._originalOpacity) {
308 |                     object.set({ opacity: object._originalOpacity });
309 |                     object._originalOpacity = undefined;
310 |                 }
311 |             },
312 | 
313 |             /**
314 |              * Drawing Logic For background drawables: (`backgroundImage`, `backgroundColor`)
315 |              * 1. if erasable = true:
316 |              *    we need to hide the drawable on the bottom ctx so when the brush is erasing it will clip the top ctx and reveal white space underneath
317 |              * 2. if erasable = false:
318 |              *    we need to draw the drawable only on the bottom ctx so the brush won't affect it
319 |              * @param {'bottom' | 'top' | 'overlay'} layer
320 |              */
321 |             prepareCanvasBackgroundForLayer: function(layer) {
322 |                 if (layer === 'overlay') {
323 |                     return;
324 |                 }
325 |                 var canvas = this.canvas;
326 |                 var image = canvas.get('backgroundImage');
327 |                 var color = canvas.get('backgroundColor');
328 |                 var erasablesOnLayer = layer === 'top';
329 |                 if (image && image.erasable === !erasablesOnLayer) {
330 |                     this.hideObject(image);
331 |                 }
332 |                 if (color && color.erasable === !erasablesOnLayer) {
333 |                     this.hideObject(color);
334 |                 }
335 |             },
336 | 
337 |             /**
338 |              * Drawing Logic For overlay drawables (`overlayImage`, `overlayColor`)
339 |              * We must draw on top ctx to be on top of visible canvas
340 |              * 1. if erasable = true:
341 |              *    we need to draw the drawable on the top ctx as a normal object
342 |              * 2. if erasable = false:
343 |              *    we need to draw the drawable on top of the brush,
344 |              *    this means we need to repaint for every stroke
345 |              *
346 |              * @param {'bottom' | 'top' | 'overlay'} layer
347 |              * @returns boolean render overlay above brush
348 |              */
349 |             prepareCanvasOverlayForLayer: function(layer) {
350 |                 var canvas = this.canvas;
351 |                 var image = canvas.get('overlayImage');
352 |                 var color = canvas.get('overlayColor');
353 |                 if (layer === 'bottom') {
354 |                     this.hideObject(image);
355 |                     this.hideObject(color);
356 |                     return false;
357 |                 };
358 |                 var erasablesOnLayer = layer === 'top';
359 |                 var renderOverlayOnTop = (image && !image.erasable) || (color && !color.erasable);
360 |                 if (image && image.erasable === !erasablesOnLayer) {
361 |                     this.hideObject(image);
362 |                 }
363 |                 if (color && color.erasable === !erasablesOnLayer) {
364 |                     this.hideObject(color);
365 |                 }
366 |                 return renderOverlayOnTop;
367 |             },
368 | 
369 |             /**
370 |              * @private
371 |              */
372 |             restoreCanvasDrawables: function() {
373 |                 var canvas = this.canvas;
374 |                 this.restoreObjectVisibility(canvas.get('backgroundImage'));
375 |                 this.restoreObjectVisibility(canvas.get('backgroundColor'));
376 |                 this.restoreObjectVisibility(canvas.get('overlayImage'));
377 |                 this.restoreObjectVisibility(canvas.get('overlayColor'));
378 |             },
379 | 
380 |             /**
381 |              * @private
382 |              * This is designed to support erasing a group with both erasable and non-erasable objects.
383 |              * Iterates over collections to allow nested selective erasing.
384 |              * Used by {@link fabric.EraserBrush#prepareCanvasObjectsForLayer}
385 |              * to prepare the bottom layer by hiding erasable nested objects
386 |              *
387 |              * @param {fabric.Collection} collection
388 |              */
389 |             prepareCollectionTraversal: function(collection) {
390 |                 var _this = this;
391 |                 collection.forEachObject(function(obj) {
392 |                     if (obj.forEachObject) {
393 |                         _this.prepareCollectionTraversal(obj);
394 |                     } else {
395 |                         if (obj.erasable) {
396 |                             _this.hideObject(obj);
397 |                         }
398 |                     }
399 |                 });
400 |             },
401 | 
402 |             /**
403 |              * @private
404 |              * Used by {@link fabric.EraserBrush#prepareCanvasObjectsForLayer}
405 |              * to reverse the action of {@link fabric.EraserBrush#prepareCollectionTraversal}
406 |              *
407 |              * @param {fabric.Collection} collection
408 |              */
409 |             restoreCollectionTraversal: function(collection) {
410 |                 var _this = this;
411 |                 collection.forEachObject(function(obj) {
412 |                     if (obj.forEachObject) {
413 |                         _this.restoreCollectionTraversal(obj);
414 |                     } else {
415 |                         _this.restoreObjectVisibility(obj);
416 |                     }
417 |                 });
418 |             },
419 | 
420 |             /**
421 |              * @private
422 |              * This is designed to support erasing a group with both erasable and non-erasable objects.
423 |              *
424 |              * @param {'bottom' | 'top' | 'overlay'} layer
425 |              */
426 |             prepareCanvasObjectsForLayer: function(layer) {
427 |                 if (layer !== 'bottom') { return; }
428 |                 this.prepareCollectionTraversal(this.canvas);
429 |             },
430 | 
431 |             /**
432 |              * @private
433 |              * @param {'bottom' | 'top' | 'overlay'} layer
434 |              */
435 |             restoreCanvasObjectsFromLayer: function(layer) {
436 |                 if (layer !== 'bottom') { return; }
437 |                 this.restoreCollectionTraversal(this.canvas);
438 |             },
439 | 
440 |             /**
441 |              * @private
442 |              * @param {'bottom' | 'top' | 'overlay'} layer
443 |              * @returns boolean render overlay above brush
444 |              */
445 |             prepareCanvasForLayer: function(layer) {
446 |                 this.prepareCanvasBackgroundForLayer(layer);
447 |                 this.prepareCanvasObjectsForLayer(layer);
448 |                 return this.prepareCanvasOverlayForLayer(layer);
449 |             },
450 | 
451 |             /**
452 |              * @private
453 |              * @param {'bottom' | 'top' | 'overlay'} layer
454 |              */
455 |             restoreCanvasFromLayer: function(layer) {
456 |                 this.restoreCanvasDrawables();
457 |                 this.restoreCanvasObjectsFromLayer(layer);
458 |             },
459 | 
460 |             /**
461 |              * Render all non-erasable objects on bottom layer with the exception of overlays to avoid being clipped by the brush.
462 |              * Groups are rendered for nested selective erasing, non-erasable objects are visible while erasable objects are not.
463 |              */
464 |             renderBottomLayer: function() {
465 |                 var canvas = this.canvas;
466 |                 this.prepareCanvasForLayer('bottom');
467 |                 canvas.renderCanvas(
468 |                     canvas.getContext(),
469 |                     canvas.getObjects().filter(function(obj) {
470 |                         return !obj.erasable || obj.isType('group');
471 |                     })
472 |                 );
473 |                 this.restoreCanvasFromLayer('bottom');
474 |             },
475 | 
476 |             /**
477 |              * 1. Render all objects on top layer, erasable and non-erasable
478 |              *    This is important for cases such as overlapping objects, the background object erasable and the foreground object not erasable.
479 |              * 2. Render the brush
480 |              */
481 |             renderTopLayer: function() {
482 |                 var canvas = this.canvas;
483 |                 this._drawOverlayOnTop = this.prepareCanvasForLayer('top');
484 |                 canvas.renderCanvas(
485 |                     canvas.contextTop,
486 |                     canvas.getObjects()
487 |                 );
488 |                 this.callSuper('_render');
489 |                 this.restoreCanvasFromLayer('top');
490 |             },
491 | 
492 |             /**
493 |              * Render all non-erasable overlays on top of the brush so that they won't get erased
494 |              */
495 |             renderOverlay: function() {
496 |                 this.prepareCanvasForLayer('overlay');
497 |                 var canvas = this.canvas;
498 |                 var ctx = canvas.contextTop;
499 |                 this._saveAndTransform(ctx);
500 |                 canvas._renderOverlay(ctx);
501 |                 ctx.restore();
502 |                 this.restoreCanvasFromLayer('overlay');
503 |             },
504 | 
505 |             /**
506 |              * @extends @class fabric.BaseBrush
507 |              * @param {CanvasRenderingContext2D} ctx
508 |              */
509 |             _saveAndTransform: function(ctx) {
510 |                 this.callSuper('_saveAndTransform', ctx);
511 |                 ctx.globalCompositeOperation = 'destination-out';
512 |             },
513 | 
514 |             /**
515 |              * We indicate {@link fabric.PencilBrush} to repaint itself if necessary
516 |              * @returns
517 |              */
518 |             needsFullRender: function() {
519 |                 return this.callSuper('needsFullRender') || this._drawOverlayOnTop;
520 |             },
521 | 
522 |             /**
523 |              *
524 |              * @param {fabric.Point} pointer
525 |              * @param {fabric.IEvent} options
526 |              * @returns
527 |              */
528 |             onMouseDown: function(pointer, options) {
529 |                 if (!this.canvas._isMainEvent(options.e)) {
530 |                     return;
531 |                 }
532 |                 this._prepareForDrawing(pointer);
533 |                 // capture coordinates immediately
534 |                 // this allows to draw dots (when movement never occurs)
535 |                 this._captureDrawingPath(pointer);
536 | 
537 |                 this._isErasing = true;
538 |                 this.canvas.fire('erasing:start');
539 |                 this._ready = true;
540 |                 this._render();
541 |             },
542 | 
543 |             /**
544 |              * Rendering is done in 4 steps:
545 |              * 1. Draw all non-erasable objects on bottom ctx with the exception of overlays {@link fabric.EraserBrush#renderBottomLayer}
546 |              * 2. Draw all objects on top ctx including erasable drawables {@link fabric.EraserBrush#renderTopLayer}
547 |              * 3. Draw eraser {@link fabric.PencilBrush#_render} at {@link fabric.EraserBrush#renderTopLayer}
548 |              * 4. Draw non-erasable overlays {@link fabric.EraserBrush#renderOverlay}
549 |              *
550 |              * @param {fabric.Canvas} canvas
551 |              */
552 |             _render: function() {
553 |                 if (!this._ready) {
554 |                     return;
555 |                 }
556 |                 this.isRendering = 1;
557 |                 this.renderBottomLayer();
558 |                 this.renderTopLayer();
559 |                 this.renderOverlay();
560 |                 this.isRendering = 0;
561 |             },
562 | 
563 |             /**
564 |              * @public
565 |              */
566 |             render: function() {
567 |                 if (this._isErasing) {
568 |                     if (this.isRendering) {
569 |                         this.isRendering = fabric.util.requestAnimFrame(this._renderBound);
570 |                     } else {
571 |                         this._render();
572 |                     }
573 |                     return true;
574 |                 }
575 |                 return false;
576 |             },
577 | 
578 |             /**
579 |              * Adds path to existing clipPath of object
580 |              *
581 |              * @param {fabric.Object} obj
582 |              * @param {fabric.Path} path
583 |              */
584 |             _addPathToObjectEraser: function(obj, path) {
585 |                 var clipObject;
586 |                 var _this = this;
587 |                 //  object is collection, i.e group
588 |                 if (obj.forEachObject) {
589 |                     obj.forEachObject(function(_obj) {
590 |                         if (_obj.erasable) {
591 |                             _this._addPathToObjectEraser(_obj, path);
592 |                         }
593 |                     });
594 |                     return;
595 |                 }
596 |                 if (!obj.getEraser()) {
597 |                     var size = obj._getNonTransformedDimensions();
598 |                     var rect = new fabric.Rect({
599 |                         width: size.x,
600 |                         height: size.y,
601 |                         clipPath: obj.clipPath,
602 |                         originX: 'center',
603 |                         originY: 'center'
604 |                     });
605 |                     clipObject = new fabric.Group([rect], {
606 |                         eraser: true
607 |                     });
608 |                 } else {
609 |                     clipObject = obj.clipPath;
610 |                 }
611 | 
612 |                 path.clone(function(path) {
613 |                     path.globalCompositeOperation = 'destination-out';
614 |                     // http://fabricjs.com/using-transformations
615 |                     var desiredTransform = fabric.util.multiplyTransformMatrices(
616 |                         fabric.util.invertTransform(
617 |                             obj.calcTransformMatrix()
618 |                         ),
619 |                         path.calcTransformMatrix()
620 |                     );
621 |                     fabric.util.applyTransformToObject(path, desiredTransform);
622 |                     clipObject.addWithUpdate(path);
623 |                     obj.set({
624 |                         clipPath: clipObject,
625 |                         dirty: true
626 |                     });
627 |                 });
628 |             },
629 | 
630 |             /**
631 |              * Add the eraser path to canvas drawables' clip paths
632 |              *
633 |              * @param {fabric.Canvas} source
634 |              * @param {fabric.Canvas} path
635 |              * @returns {Object} canvas drawables that were erased by the path
636 |              */
637 |             applyEraserToCanvas: function(path) {
638 |                 var canvas = this.canvas;
639 |                 var drawables = {};
640 |                 [
641 |                     'backgroundImage',
642 |                     'backgroundColor',
643 |                     'overlayImage',
644 |                     'overlayColor',
645 |                 ].forEach(function(prop) {
646 |                     var drawable = canvas[prop];
647 |                     if (drawable && drawable.erasable) {
648 |                         this._addPathToObjectEraser(drawable, path);
649 |                         drawables[prop] = drawable;
650 |                     }
651 |                 }, this);
652 |                 return drawables;
653 |             },
654 | 
655 |             /**
656 |              * On mouseup after drawing the path on contextTop canvas
657 |              * we use the points captured to create an new fabric path object
658 |              * and add it to every intersected erasable object.
659 |              */
660 |             _finalizeAndAddPath: function() {
661 |                 var ctx = this.canvas.contextTop,
662 |                     canvas = this.canvas;
663 |                 ctx.closePath();
664 |                 if (this.decimate) {
665 |                     this._points = this.decimatePoints(this._points, this.decimate);
666 |                 }
667 | 
668 |                 // clear
669 |                 canvas.clearContext(canvas.contextTop);
670 |                 this._isErasing = false;
671 | 
672 |                 var pathData = this._points && this._points.length > 1 ?
673 |                     this.convertPointsToSVGPath(this._points).join('') :
674 |                     'M 0 0 Q 0 0 0 0 L 0 0';
675 |                 if (pathData === 'M 0 0 Q 0 0 0 0 L 0 0') {
676 |                     canvas.fire('erasing:end');
677 |                     // do not create 0 width/height paths, as they are
678 |                     // rendered inconsistently across browsers
679 |                     // Firefox 4, for example, renders a dot,
680 |                     // whereas Chrome 10 renders nothing
681 |                     canvas.requestRenderAll();
682 |                     return;
683 |                 }
684 | 
685 |                 var path = this.createPath(pathData);
686 |                 canvas.fire('before:path:created', { path: path });
687 | 
688 |                 // finalize erasing
689 |                 var drawables = this.applyEraserToCanvas(path);
690 |                 var _this = this;
691 |                 var targets = [];
692 |                 canvas.forEachObject(function(obj) {
693 |                     if (obj.erasable && obj.intersectsWithObject(path, true)) {
694 |                         _this._addPathToObjectEraser(obj, path);
695 |                         targets.push(obj);
696 |                     }
697 |                 });
698 | 
699 |                 canvas.fire('erasing:end', { path: path, targets: targets, drawables: drawables });
700 | 
701 |                 canvas.requestRenderAll();
702 |                 path.setCoords();
703 |                 this._resetShadow();
704 | 
705 |                 // fire event 'path' created
706 |                 canvas.fire('path:created', { path: path });
707 |             }
708 |         }
709 |     );
710 | 
711 |     /** ERASER_END */
712 | })();


--------------------------------------------------------------------------------