Fabric.js set scaled pattern as canvas background

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(); 
    });