Fabric.js 将缩放图案设置为画布背景答案

【问题标题】：Fabric.js set scaled pattern as canvas backgroundFabric.js 将缩放图案设置为画布背景
【发布时间】：2016-12-22 09:11:48
【问题描述】：

我试图将缩放图案添加为画布背景，但没有成功。我将此代码添加到 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) {
...
...

但是这个空的黑屏。不是模式

【问题讨论】：

标签： html5-canvas fabricjs

【解决方案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();
    });

【讨论】：