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

时间:2017-04-18 18:24:53

标签: javascript fabricjs

我想知道是否有选项来调整对象大小而不在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)

})

有什么想法吗?

1 个答案:

答案 0 :(得分: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;
});