如何使用fabric.js創建自定義筆刷顏色？

Question

我一直在嘗試使用fabric JS創建一個圖像文件的自定義筆刷顏料。我曾嘗試使用fabric.PatternBrush，但這不是我正在尋找的確切的東西，因爲這會創建一種背景圖案類型的繪畫，而我正在嘗試執行的操作是在拖動鼠標的任何位置重複該圖像。

任何人都可以請指導我正確的方式嗎？對我來說，切換到其他任何正在查找的繪圖庫都可以。

Answer 1

我找到了解決這個問題的辦法。我們可以按如下方式創建使用fabric.BaseBrush自定義畫筆：現在

fabric.SprayBrush = fabric.util.createClass(fabric.BaseBrush, { 

    opacity: .2, 
    width: 30, 

    _baseWidth: 5, 
    _drips: [], 
    _dripThreshold: 15, 
    _inkAmount: 0, 
    _interval: 20, 
    _lastPoint: null, 
    _point: null, 
    _strokeId: 0, 
    brush: null, 
    brushCol : '/static/img/creation_room/textures/texture2.png', 

    initialize: function(canvas, opt) { 
     var context = this; 
     opt = opt || {}; 

     this.canvas = canvas; 
     this.width = opt.width || canvas.freeDrawingBrush.width; 
     this.opacity = opt.opacity || canvas.contextTop.globalAlpha; 
     this.color = opt.color || canvas.freeDrawingBrush.color; 

     this.canvas.contextTop.lineJoin = "round"; 
     this.canvas.contextTop.lineCap = "round"; 

     this._reset(); 

     fabric.Image.fromURL(this.brushCol, function(brush) { 
     console.log(brush); 
     context.brush = brush; 
     context.brush.filters = []; 
     context.changeColor(context.color || this.color); 
     }, { crossOrigin: "anonymous" }); 
    }, 

    changeColor: function(color) { 
     this.color = color; 
     this.brush.filters[0] = new fabric.Image.filters.Tint({ color: color }); 
     this.brush.applyFilters(this.canvas.renderAll.bind(this.canvas)); 
    }, 

    changeOpacity: function(value) { 
     this.opacity = value; 
     this.canvas.contextTop.globalAlpha = value; 
    }, 

    onMouseDown: function(pointer) { 
     this._point = new fabric.Point(pointer.x, pointer.y); 
     this._lastPoint = this._point; 

     this.size = this.width + this._baseWidth; 
     this._strokeId = +new Date(); 
     this._inkAmount = 0; 

     this.changeColor(this.color); 
     this._render(); 
    }, 

    onMouseMove: function(pointer) { 
     this._lastPoint = this._point; 
     this._point = new fabric.Point(pointer.x, pointer.y); 
    }, 

    onMouseUp: function(pointer) { 
    }, 

    _render: function() { 
     var context = this; 

     setTimeout(draw, this._interval); 

     function draw() { 
     var point, distance, angle, amount, x, y; 

     point = new fabric.Point(context._point.x || 0, context._point.y || 0); 
     distance = point.distanceFrom(context._lastPoint); 
     angle = point.angleBetween(context._lastPoint); 
     amount = (100/context.size)/(Math.pow(distance, 2) + 1); 

     context._inkAmount += amount; 
     context._inkAmount = Math.max(context._inkAmount - distance/10, 0); 
     if (context._inkAmount > context._dripThreshold) { 
      context._drips.push(new fabric.Drip(context.canvas.contextTop, point, context._inkAmount/2, context.color, context._strokeId)); 
      context._inkAmount = 0; 
     } 

     x = context._lastPoint.x + Math.sin(angle) - context.size/2; 
     y = context._lastPoint.y + Math.cos(angle) - context.size/2; 
     context.canvas.contextTop.drawImage(context.brush._element, x, y, context.size, context.size); 

     if (context.canvas._isCurrentlyDrawing) { 
      setTimeout(draw, context._interval); 
     } else { 
      context._reset(); 
     } 
     } 
    }, 

    _reset: function() { 
     this._drips.length = 0; 
     this._point = null; 
     this._lastPoint = null; 
    } 
    }); 

，我們只需在畫布上用這把刷子。

var canvas = new fabric.Canvas('canvas'); 
canvas.freeDrawingBrush = new fabric.SprayBrush(canvas, { width: 70,opacity: 0.6, color: "transparent" });