fabric.js | Überprüfen Sie, ob die Maus ist nach unten Fehler

Question

ich die folgende Fehlermeldung erhalten:

Uncaught TypeError: Cannot read property 'setFill' of null

ich fabric.js verwende und der Fehler tritt in der „options.target.setFill() ...“ Zeile:

var mDown = false; 
canvas.on('mouse:down', function(options) { 
    mDown = true; 
}); 
canvas.on('mouse:up', function(options) { 
    mDown = false; 
}); 
canvas.on('mouse:move', function(options) { 
    if (mDown == true) { 
     options.target.setFill('red'); 
     canvas.renderAll(); 
    } 
}); 

Ohne die if-Bedingung funktioniert das Ereignis "mouse: move".

Answer 1

Sie dürfen nicht auf ein Objekt klicken. Das Ziel wird nur festgelegt, wenn Sie auf ein Objekt klicken. Unten füge ich einen Haken hinzu, um zu sehen, ob das Ziel gesetzt ist. Ohne diese Überprüfung erhalte ich denselben Fehler, den Sie erklärt haben.

Sie können Ihren Code auch aktualisieren, um nicht auf die Leinwand für Klickereignisse zu hören und stattdessen das Ereignis an das Objekt selbst anzuhängen.

var canvas = new fabric.Canvas("c"); 
 

 
var mDown = false; 
 

 
canvas.on('mouse:down', function(options) { 
 
    mDown = true; 
 
}); 
 
canvas.on('mouse:up', function(options) { 
 
    mDown = false; 
 
}); 
 
canvas.on('mouse:move', function(options) { 
 
    if (mDown == true && options.target) { 
 
     options.target.setFill('red'); 
 
     canvas.renderAll(); 
 
    } 
 
});

canvas { 
 
    border: 1px solid black; 
 
}

<canvas id="c" width="400" height="300"></canvas> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script>

Answer 2

Ich denke, was Sie brauchen, ist object:moving nicht mouse:move Ereignis seit mouse:move wird ausgelöst, wenn Sie mit der Maus Punkt auf der Leinwand bewegen, da kein Objekt ausgewählt ist in Sie Leinwand, Sie null erhalten.

suchen Sie nach dem folgenden Code. Ich habe ein Dreieck erstellt und jedes Mal, wenn ich es bewege, ändere es seine Farbe. Hoffe, du hast eine Idee davon.

var canvas = new fabric.Canvas('c'); 
 
    var mDown = false; 
 
    var triangle = new fabric.Triangle({ 
 
    width: 20, height: 30, fill: 'blue', left: 50, top: 50 
 
    }); 
 
    canvas.add(triangle); 
 

 
    canvas.on('mouse:up', function(options) { 
 
    mDown = false; 
 
    triangle.set('fill', 'blue'); 
 
    }); 
 

 
    canvas.on('mouse:down', function(options) { 
 
    mDown = true; 
 
    //triangle.set('fill', 'blue'); 
 
    }); 
 
    
 
canvas.on('object:moving', function(options) { 
 
    if (mDown == true) 
 
     triangle.set('fill', 'red'); 
 
//triangle.set('fill', 'red'); 
 
//canvas.add(triangle); 
 
    });

canvas { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script> 
 

 
<canvas id="c" width="400" height="300"></canvas>