如何在重新制作圖像時在圖像中重複x背景

Question

我想在調整大小時重複背景。

這是我的代碼，我試過了。

var canvas = new fabric.Canvas('c', { 
 
    clipTo: function(ctx) { 
 
    ctx.rect(1000, 1000, 400, 400); 
 
    } 
 
}); 
 
fabric.Image.fromURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAASdEVYdFNvZnR3YXJlAEdyZWVuc2hvdF5VCAUAAADLSURBVFhH7ZnBCoMwEET9/68URBHSNj0UolFoI+aQickKlT05jz0MGQIPkb2kadu3ta42ff/MTtLRazct55bajOMjO0lHr920vnWMMTGV0GuphVALoRaiqNV1dq4TLsdUIrTe+z0fw+ndmEo0w/D61AmXYyqh1179WjGVuNLyl0eohVALuZ8Wtzwgt9zyiNxSC6EWQi1EUYtbHpBbbnlEbqmFUAuhFqKoxS0PyC23PCK31EKohVAL0dXK3vLSOX0TnKZ1z8fw/3uiW37L27QIZwrV4gAAAABJRU5ErkJggg==', function(img) { 
 
    var patternSourceCanvas = new fabric.StaticCanvas(); 
 
    patternSourceCanvas.add(img); 
 
    var pattern = new fabric.Pattern({ 
 
    source: function() { 
 
     patternSourceCanvas.setDimensions({ 
 
     width: img.getWidth(), 
 
     height: img.getHeight() 
 
     }); 
 
     return patternSourceCanvas.getElement(); 
 
    }, 
 
    repeat: 'repeat' 
 
    }); 
 
    var rectangle = new fabric.Rect({ 
 
    fill: pattern, 
 
    left: 1150, 
 
    top: 1150, 
 
    width: img.getWidth(), 
 
    height: img.getHeight() 
 
    }); 
 
    canvas.add(rectangle); 
 
    canvas.renderAll(); 
 
}); 
 

 
canvas.on('object:scaling', function(e) { 
 
    if (e.target != null) { 
 
    console.log(e.target); 
 
    } 
 
});

body { 
 
    overflow: hidden; 
 
} 
 

 
.container { 
 
    top: -1000px; 
 
    left: -1000px; 
 
    position: relative; 
 
    z-index: 1; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script> 
 
<div class="container"> 
 
    <canvas id="c" width="2400" height="2400"></canvas> 
 
</div>

我怎樣才能讓，背景重複？

這裏是jsFiddle

Answer 1

@玉安和，我們將不得不使用object:scaling事件縮放對象回爲1x和對象的變化大小，以使重複的模式，而不是縮放來的。見這裏

var canvas = new fabric.Canvas('c'); 
fabric.Object.prototype.transparentCorners = false; 

    var padding = 0; 

    fabric.Image.fromURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAASdEVYdFNvZnR3YXJlAEdyZWVuc2hvdF5VCAUAAADLSURBVFhH7ZnBCoMwEET9/68URBHSNj0UolFoI+aQickKlT05jz0MGQIPkb2kadu3ta42ff/MTtLRazct55bajOMjO0lHr920vnWMMTGV0GuphVALoRaiqNV1dq4TLsdUIrTe+z0fw+ndmEo0w/D61AmXYyqh1179WjGVuNLyl0eohVALuZ8Wtzwgt9zyiNxSC6EWQi1EUYtbHpBbbnlEbqmFUAuhFqKoxS0PyC23PCK31EKohVAL0dXK3vLSOX0TnKZ1z8fw/3uiW37L27QIZwrV4gAAAABJRU5ErkJggg==', function(img) { 

    img.scaleToWidth(50); 
    var patternSourceCanvas = new fabric.StaticCanvas(); 
    patternSourceCanvas.add(img); 
    patternSourceCanvas.renderAll(); 
    var pattern = new fabric.Pattern({ 
     source: function() { 
     patternSourceCanvas.setDimensions({ 
      width: img.getScaledWidth() + padding, 
      height: img.getScaledHeight() + padding 
     }); 
     patternSourceCanvas.renderAll(); 
     return patternSourceCanvas.getElement(); 
     }, 
     repeat: 'repeat' 
    }); 

    var rect = new fabric.Rect({ 
     width: 250, 
     height: 250, 
     fill: pattern, 
     objectCaching: false 
    }); 

    canvas.add(rect); 
    rect.center().setCoords(); 

}); 



canvas.on('object:scaling', function(e) { 
    if (e.target != null) { 
    console.log(e.target); 
    var obj = e.target; 
     var height = obj.height * obj.scaleY; 
     var width = obj.width * obj.scaleX; 
     obj.height = height; 
     obj.width = width; 
     obj.scaleX = 1; 
     obj.scaleY = 1; 
    } 
}); 

https://jsfiddle.net/dotriz/ajsdmg4s/