I'm currently working on an Angular project that utilizes fabric.js for canvas functionality. However, I've encountered a problem when trying to use event listeners with the canvas object.
In the snippet of code below, I'm attempting to access the global variable "disabled" within the "movehandler" function. Unfortunately, when I try to log "this.disabled", it returns as "undefined" in the console.
Is there a way to properly utilize global variables within functions for the canvas?
...
disabled = "yes";
...
ngAfterViewInit(){
this.canvas = new fabric.Canvas(this.canvasTerm);
console.log(this.canvas);
this.innerWidth = window.innerWidth;
this.innerHeight = window.innerHeight;
this.canvas.setHeight(this.innerHeight - 120);
this.canvas.setWidth(this.innerWidth - 120);
this.canvas.on('object:moving', function () {
console.log('Event object:moving Triggered');
});
var moveHandler = function (evt) {
var movingObject = evt.target;
//console.log("sss",movingObject.get('left'), movingObject.get('top'));
};
//handler for done modifying objects on canvas
var modifiedHandler = function (evt) {
var modifiedObject = evt.target;
console.log(this.disabled);
console.log( modifiedObject.id,"last",modifiedObject.get('left'), modifiedObject.get('top'));
};
var customEvtHandler = function (evt) {
console.log("I was triggered by a custom event.");
};
//or you register with key/value pairs
this.canvas.on({
'object:moving' : moveHandler,
'object:modified' : modifiedHandler,
'custom:event' : customEvtHandler
});
}