Design patterns fabric JS中对象缩放的模式重复

假设我有一个填充了图案的矩形。我希望在缩放矩形时重复该图案

现在，当我缩放它时，它正在缩放

---

谢谢

@user2571818我也在找这个，终于找到了。我们必须使用

object:scaling

事件将对象缩放回1x，并更改对象的大小，以使模式重复，而不是缩放。看到这里了吗

Is there any way to repeat the pattern inside an object in fabric JS.

---

jsiddle:

目前没有内置的支持，但作为一种解决方法，您应该能够在调整对象大小时更改源图像尺寸。请看一看，如果在重新调整对象大小时使用对象缩放方法捕获对象的宽度，则无法正确获取宽度值。我点击鼠标并将对象重新调整到某个位置，然后释放鼠标，它在这些动作上显示相同的值。在下一次单击“仅”时，我将获得新值。代码示例代码：canvas.on（'object:scaling'，function（evt）{console.log（evt.target.currentWidth，evt.target.currentHeight）；}）；您应该检查

evt.target.scaleX

&

evt.target.scaleY

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