CODEWITHSUNDEEP
javascriptcanvaszoomingfabricjs
Erdem Aydemir
Erdem Aydemir

Reputation: 389

FabricJS - ZoomToPoint not working with backgroundImage

i use zoomtopoint and zoom to object. but not working with background. I want to zoom in on the object and the background. How can i ?

Example : object size : 100x100 not zoom. object size : 100x100 not zoom. after zoom object size :100x100 after zoom object size :100x100

after zoom and The grid remained the same.

zoom event

document.addEventListener('wheel', function(event) {
        var evt = window.event || event;
        var delta = evt.detail? evt.detail*(-120) : evt.wheelDelta;
        var curZoom = canvas.getZoom();
        var newZoom = curZoom + delta / 4000;
        var x = event.offsetX;
        var y = event.offsetY;
        canvas.zoomToPoint({ x: x, y: y }, newZoom);
        if(event != null)event.preventDefault();
        return false;
        canvas.calcOffset();
    }, false);

grid code:

canvas.setBackgroundColor({source: src, repeat: 'repeat'}, canvas.renderAll.bind(canvas), function () {
        canvas.renderAll();
        proceed();
    });

EDİT

#canvas-background { display: inline-block; position: absolute; top: 0; right: 0; }

but i dont use css.

Background image

Grid 50x50

Thank you

Sorry, i cant speak english well.

Upvotes: 3

Views: 2812

Answers (1)

Tim Harker
Tim Harker

Reputation: 2407

Relevant code is below (and the rest is in the JSFiddle), note the canvas size and CSS container trick used to allow zooming out.

Example : object size : 100x100 not zoom.

fabricjs canvas grid not zoom

after zoom object size :100x100

fabricjs canvas grid zoom

after zoom and The grid is no longer the same.

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 background = new fabric.Rect({
    width: canvas.getWidth(),
    height: canvas.getHeight(),
    fill: pattern,
    selectable: false
  });
  canvas.add(background, rectangle);
  canvas.renderAll();
});

Here's a working JSFiddle, https://jsfiddle.net/rekrah/86t2b8bs/.

Hope this helps.

UPDATE:

@forguta also wanted to ensure objects didn't go behind the background when sendToBack() was run. Made "repeated" background image into one image so setBackgroundImage() could be used (image size only increased to 64K and I'm sure could be compressed further).

fabricjs canvas grid not zoom send to back

Simpler code:

canvas.setBackgroundImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACcQAAAnECAIAAAChEWJqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QMDDwYflNda9wAAIABJREFUeNrs2TGO67qWhlHSotSFm7z5z+4NoQsoXJbFs8HObYoGbJxmslYk4JfgD053/u9///............', canvas.renderAll.bind(canvas), {
  // Needed to position backgroundImage at 0/0
  originX: 'left',
  originY: 'top'
});

Here's an updated working JSFiddle, https://jsfiddle.net/rekrah/u0srdsdr/.

Upvotes: 1

Related Questions