Fabric.js將縮放的圖案設置爲畫布背景

Question

我試圖將縮放的圖案添加爲畫布背景，但未取得成功。我將此代碼添加到fabric.js，因爲我需要添加縮放模式作爲背景。

__setBgOverlayColor: function(property, color, callback) { 

      if(color && color.source && color.width && color.height) { 
      var _this = this; 
      fabric.util.loadImage(color.source, function(img) {    
       var pattern = new fabric.Rect({ 
        width: color.width, 
        height: color.height, 
        top:0, 
        left:0 
       }); 
       pattern.setPatternFill({ 
        source: img, 
        repeat: 'repeat' 
       }); 
       _this[property] = pattern; 
       callback && callback(); 
      }); 
      } else if (color && color.source) { 
      var _this = this; 
      fabric.util.loadImage(color.source, function(img) { 
... 
... 

但是這個空的黑屏。不是模式

Answer 1

我找到了這個問題的解決方案。如果這段代碼放在了setBackgroundImage這將工作

在fabric.js

__setBgOverlayImage: function(property, image, callback, options) { 

     if(image && image.source && image.width && image.height) { 
     var _this = this; 
     fabric.util.loadImage(image.source, function(img) { 
      var pattern = new fabric.Rect({ 
       width: image.width, 
       height: image.height, 
       top:image.top, 
       left:image.left 
      }); 
      pattern.scaleToHeight(image.scale);    
      pattern.setPatternFill({ 
       source: img, 
       repeat: 'repeat' 
      }); 
      _this[property] = pattern; 
      callback && callback(); 
     }); 
     } else if (typeof image === 'string') { 
     fabric.util.loadImage(image, function(img) { 
      this[property] = new fabric.Image(img, options); 
      callback && callback(); 
     }, this, options && options.crossOrigin); 
     } 
     else { 
     options && image.setOptions(options); 
     this[property] = image; 
     callback && callback(); 
     } 

     return this; 
    } 

，您可以通過

canvas.setBackgroundImage({scale:mask.getHeight() ,width:maskOriWidth, height:maskOriHeight,top:mask.getTop(),left:mask.getLeft(), source: src, repeat: 'repeat'}, function() {  
     canvas.renderAll(); 
    }); 

調用此