B station FabricJs project [Easy Sketchpad] — Free brushes

Fabricjs related code

<template> <div class="home"> <div class="btnwrap"> <div @click="changeBrushColor()" class="brushColor" ref="brushColor"> <chrome-picker class="colorPicker" :value="colors" @input="updateValue" V-if ="showColorPicker"></chrome-picker> </div> <div class="brushWidth"> <label > Brush thickness :</label> <input type="range" </button @click="freeDraw()" class="freeDrawBtn"> </button> <button @click="clear()" class="clearBtn"> </button> </div>  <canvas id="c" width="1440" height="600"></canvas> </div> </template>Copy the code
data () { return { colors:'#000000', width:1, strokeWidth:1, showColorPicker:false, canvas:null, drawingObject:null, mouseFrom: {}, mouseTo: {}, currentType:'free', idDrawing:false, } }, watch: { width: function (val) { console.log(val); this.canvas.freeDrawingBrush.width = parseInt(this.width, 10); this.strokeWidth = parseInt(this.width, 10); }, }, methods:{ initBrushColor(){ this.$refs.brushColor.style.backgroundColor = this.colors; }, updateValue(val){ console.log(val); this.colors = val.hex; this.initBrushColor(); this.canvas.freeDrawingBrush.color = this.colors; }, changeBrushColor(){ this.showColorPicker = ! this.showColorPicker; }, initfreeDraw(){ if(this.canvas == null){ this.canvas = new fabric.Canvas("c"); this.canvas.backgroundColor = '#efefef'; this.canvas.isDrawingMode= 1; } this.canvas.freeDrawingBrush.color = this.colors; this.canvas.freeDrawingBrush.width = this.width; this.canvas.renderAll(); }, freeDraw(){ this.canvas.isDrawingMode = true; this.currentType = 'free'; this.resetLine(); }, lineDraw(){ this.currentType = 'line'; this.ininLine(); this.resetLine(); }, ininLine(){ this.canvas.isDrawingMode = false; this.canvas.selection = false; let canvasObject = new fabric.Line([this.mouseFrom.x, this.mouseFrom.y, this.mouseTo.x, this.mouseTo.y], { fill: this.colors, stroke: this.colors, strokeWidth: this.strokeWidth }); canvasObject.selectable = false; if (this.drawingObject) { this.canvas.remove(this.drawingObject); } this.canvas.add(canvasObject); this.drawingObject = canvasObject; }, initEvent(){ this.canvas.on('mouse:down', (options) => { if(this.currentType == 'line'){ this.mouseFrom.x = options.e.clientX; this.mouseFrom.y = options.e.clientY - 50; this.idDrawing = true; }}); this.canvas.on('mouse:move', (options) => { if(this.idDrawing && this.currentType == 'line'){ this.mouseTo.x = options.e.clientX; this.mouseTo.y = options.e.clientY - 50; this.ininLine(); }}); this.canvas.on("mouse:up", (options) => { if(this.currentType == 'line'){ this.mouseTo.x = options.e.clientX; this.mouseTo.y = options.e.clientY - 50; this.drawingObject = null; this.idDrawing = false; }}); }, resetLine(){ this.mouseFrom = {}; this.mouseTo = {}; }, clear(){ this.canvas.clear(); this.canvas.backgroundColor = '#efefef'; this.resetLine(); } }, mounted(){ this.initBrushColor(); this.initfreeDraw(); this.initEvent(); } </script>Copy the code

note

The main idea is to click on the event monitoring, and then distinguish the current is in what mode, specific can see the code implementation.

reference

  1. The website address
  2. Github project address

To contact me

Add me to wX: Meethaowu, follow my public account: big front end says. Any topic about the front end is welcome.