探索 Fabric.js 图案画笔：开启刮刮卡艺术之旅

2023-12-08 19:27:52

初识 Fabric.js 图案画笔

Fabric.js 是一个强大且灵活的 JavaScript 库，用于在 HTML5 Canvas 上进行图形操作。通过图案画笔（PatternBrush）功能，开发者可以轻松实现类似刮刮卡的效果，为网页添加互动性和视觉趣味。

使用方法概览

首先，需要在项目中引入 Fabric.js 的库文件。可以通过 CDN 引入，也可以使用 npm 安装：

npm install fabric --save

接着，在代码中引用并初始化 Fabric.js：

import fabric from 'fabric';
const canvas = new fabric.Canvas('canvas-id');

创建图案画笔

图案画笔的创建主要依赖于 Fabric.js 的 PatternBrush 类，它允许开发者通过指定图案来定制画笔的行为。这里是一个简单的示例，展示如何初始化一个使用图案填充的画笔：

fabric.PatternBrush = fabric.util.createClass(fabric.AbstractBrush, {
  type: 'pattern',
  
  /**
   * 创建图案画刷实例
   */
  createObject: function () {
    const patternSrc = 'https://example.com/pattern.png';
    
    // 加载图案图片资源
    new Image().src = patternSrc;
    
    return fabric.util.createImageFromURL(patternSrc, (img) => {
      return new fabric.Pattern({
        source: img,
        repeat: 'repeat'
      });
    });
  },
  
  /**
   * 绘制动作，通过canvas进行绘制
   */
  mouseDown: function () {
    this.path = [];
    const patternObj = this.createObject();
    
    // 创建一个使用图案填充的矩形，并将其添加到Canvas中。
    fabric.util.addListener(canvas.upperCanvasEl, 'mousemove', (e) => {
      const pos = canvas.getPointer(e);
      if (!this.isDrawing()) return;
      
      this.path.push(pos);
      
      var shape = new fabric.Rect({
        width: 10,
        height: 10,
        fill: patternObj,
        left: pos.x - 5,
        top: pos.y - 5
      });
      canvas.add(shape);
    }, false);
  },
  
  mouseMove: function () {},
  
  mouseUp: function () {
    fabric.util.removeListener(canvas.upperCanvasEl, 'mousemove', this.mouseDown);
    this.path = [];
  }
});

// 初始化图案画笔
const patternBrush = new fabric.PatternBrush(canvas);

canvas.isDrawingMode = true;