canvas.getZoom() is undefined in Angular8 using fabricjs

Asked Jan 17 '20 at 08:02

Active Jan 17 '20 at 08:06

Viewed 379 times

I am using fabricjs in Angular 8 and on mouse wheel event, I want to zoom the canvas. But, when the event is triggered, I got the error about the function, canvas.getZoom() is undefined. I have searched but, I didn't get anything related to this issue. My other functionality in the fabricjs is working, but this isn't.

Here is my code :

  this.canvas.on('mouse:wheel', function(opt) {
    var delta = opt.e.deltaY;
    console.log("delta",delta)
    var zoom = this.canvas.getZoom();
    console.log("zoom",zoom)
    zoom = zoom + delta/200;
    if (zoom > 20) zoom = 20;
    if (zoom < 0.01) zoom = 0.01;
    this.canvas.setZoom(zoom);
    opt.e.preventDefault();
    opt.e.stopPropagation();
})

It prints on the console with the value of delta, but after this.canvas.getZoom() fires, it throws error.

edited Jan 17 '20 at 08:06

Jins Thomas Shaji

asked Jan 17 '20 at 08:02

Muhammad Abdullah

`this` inside the function is the function itself, not the component. You can try to solve it by declaring a `self = this` outside that function, and use `self.canvas.getZoom()` – Jacopo Sciampi Jan 17 '20 at 08:08
I am using Angular 8 and "this" is the reference to canvas global variable – Muhammad Abdullah Jan 17 '20 at 08:10
self doenot exist on type "Window&typeof globalThis' – Muhammad Abdullah Jan 17 '20 at 08:12
2

Then if this inside the function is the canvas itself just use `this.getZoom()` – Jacopo Sciampi Jan 17 '20 at 08:15
1

This may help https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback – Balaj Khan Jan 22 '20 at 11:36

canvas.getZoom() is undefined in Angular8 using fabricjs

0 Answers0