CODEWITHSUNDEEP
javascriptfabricjs
Eugene Vilder
Eugene Vilder

Reputation: 562

How to resize object without scaling pattern in FabricJS?

I'm wondering if there is an option to resize object without scaling its pattern in 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)

})

Any idea ?

Upvotes: 0

Views: 1643

Answers (1)

Sjoerd.Be
Sjoerd.Be

Reputation: 11

Add this little code below. This will rescale the background pattern for you while scaling.

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

Upvotes: 1

Related Questions