javascript - 如何在 FabricJS 中调整对象大小而不缩放模式？

Question

我想知道 FabricJS 中是否有一个选项可以调整对象大小而不缩放其图案？

Link to Fiddle

var canvas = window._canvas = new fabric.Canvas('c');

fabric.Image.fromURL('https://assets-cdn.github.com/images/modules/site/integrators/slackhq.png', function(img) {
  var patternSourceCanvas = new fabric.StaticCanvas()
  patternSourceCanvas.add(img)
  patternSourceCanvas.setBackgroundColor('red', patternSourceCanvas.renderAll.bind(patternSourceCanvas))
  patternSourceCanvas.setHeight(256);
  patternSourceCanvas.setWidth(256);

  var pattern = new fabric.Pattern({
    source: function() {
      return patternSourceCanvas.getElement();
    },
    repeat: 'no-repeat'
  })

  // create a rectangle object
  var rect = new fabric.Rect({
    fill: pattern,
    width: 256,
    height: 256
  })

  // "add" rectangle onto canvas
  canvas.add(rect)

})

有什么想法吗？

Answer 1

在下面添加这个小代码。这将在缩放时重新缩放背景图案。

canvas.observe("object:scaling", function (e) {
    var shape = e.target;
    shape.width = shape.scaleX * shape.width;
    shape.height = shape.scaleY * shape.height;
    shape.scaleX = 1;
    shape.scaleY = 1;
});