Ionic FabricJs 函数访问问题

Question

ionViewDidEnter(){
    this.loadCanvas();
}
loadCanvas(){
    canvas.on('mouse:down', function(e){
        this.canvasMouseDown(e);    
    });
}
canvasMouseDown(e){
    console.log(this.lock);
    console.log(this.pausePanning);
    if(!this.lock){
        this.pausePanning = true;
    }
}

这就是代码。每次单击时都会出错。喜欢下面

Ionic error

我尝试了所有组合，但仍然有同样的问题

Answer 1

Fabric 事件是 bound 触发它们的对象，这意味着这里：

canvas.on('mouse:down', function(e){
    this.canvasMouseDown(e);    
});

this 是 canvas 的实例。当您调用 this.canvasMouseDown() 时，您实际上是在调用 canvas.canvasMouseDown()，所以这就是错误的来源。尝试使用 arrow function 作为事件处理程序：

loadCanvas(){
    canvas.on('mouse:down', (e) => {
        this.canvasMouseDown(e);    
    });
}

Ionic FabricJs 函数访问问题

Ionic FabricJs Problem with access to function

fabricjs

angularjs

ionic-framework

ionic3