JSFiddle - React, Tailwind, and code Playground

by codert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
<button class="keep">保留</button>
    <button class="drop">剔除</button>
    <button class="eraser">橡皮擦</button>
    <button class="clear">清除</button>
    <button class="export">导出</button>
    <div class="brush-size">
      <label>画笔大小</label>
      <input id="brushSize" type="range" value=30 min=1 max=100 step=1>
    </div>
    <canvas id="canvas"></canvas>

CSS

.keep {
      color: blue
    }

    .drop {
      color: red;
    }

    .brush-size {
      font-size: 12px;
    }

JavaScript

const keepBtn = document.querySelector('.keep');
const dropBtn = document.querySelector('.drop');
const eraserBtn = document.querySelector('.eraser');
const brushSize = document.querySelector('#brushSize');
const clearBtn = document.querySelector('.clear');
const exportBtn = document.querySelector('.export');
const canvas = new fabric.Canvas('canvas', {
  width: 600,
  height: 400,
  isDrawingMode: true
});

const status = {};

let eraserFlag = false;
Object.defineProperty(status, 'eraserFlag', {
  set(newVal) {
    if (!newVal) {
      delete canvas.freeDrawingBrush.onMouseDown;
      delete canvas.freeDrawingBrush.onMouseMove;
      delete canvas.freeDrawingBrush.onMouseUp;
    }
    eraserFlag = newVal;
  },
  get() {
    return eraserFlag;
  }
})

canvas.freeDrawingBrush.width = 30;

window.canvas = canvas;

function loadImg() {
  fabric.Image.fromURL('http://wx3.sinaimg.cn/mw690/0060lm7Tly1fsnk1sapvgj30dw0dwq46.jpg', (oImg) => {
    canvas.set('backgroundImage', oImg);
    canvas.renderAll();
  });
}

// canvas.on('path:created', function(e){
// 	path = e.path;
//   if(eraserFlag) {
//   	let objects = canvas.getObjects().slice();
//     let group = new fabric.Group(objects);
//     objects.forEach((obj) => {
//     	canvas.remove(obj);
//     });
//     canvas.add(group);
//     canvas.renderAll();
//   }
// });

function setPath(path) {
  path.set('globalCompositeOperation', 'destination-out');
  path.set('stroke', 'blue');
}

keepBtn.addEventListener('click', () => {
	status.eraserFlag = false;
	canvas.freeDrawingBrush.color = 'rgba(0, 0, 255, 0.7)';
}, false);

dropBtn.addEventListener('click', () => {
	status.eraserFlag = false;
	canvas.freeDrawingBrush.color = 'rgba(255, 0, 0, 0.7)';
}, false);

eraserBtn.addEventListener('click', () => {
	status.eraserFlag = true;
	canvas.freeDrawingBrush.color = 'rgba(0,0,0,0)';

  let previousePath = null;
  let _mouseUp = canvas.freeDrawingBrush.onMouseUp;

  canvas.freeDrawingBrush.onMouseMove = move;
 ...