fabric.js | 检查鼠标是否出现故障

Question

我收到以下错误：

未捕获的TypeError：无法读取null的属性'setFill'

我正在使用fabric.js，错误发生在“options.target.setFill（）...”行：

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();
    }
});

没有if条件，“mouse：move”事件有效。

Answer 1

您不能单击对象。 仅在单击对象时设置目标。 下面我添加一个检查，看看是否设置了目标。 没有那个检查我得到你解释的相同的错误。

您还可以更新代码，以便不侦听单击事件的画布，而是将事件附加到对象本身。

 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

我认为你需要的是object:moving而不是mouse:move事件，因为mouse:move当你将鼠标指针移动到画布时触发移动，因为在画布中没有选择任何对象，你得到null。

看看下面的代码。 我创建了一个三角形，每次移动它都会改变它的颜色。 希望你有一个想法。

 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>