fabric.js |检查鼠标是否按下错误

Question

我收到以下错误：

Uncaught TypeError: Cannot read property 'setFill' of null

我正在使用 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

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

您也可以更新您的代码，不监听 canvas 的点击事件，而是将事件附加到对象本身。

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 事件，因为当您将鼠标指向 canvas 时会触发 mouse:move，因为没有选择任何对象在你 canvas 中，你得到 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>

fabric.js |检查鼠标是否按下错误

fabric.js | Check if mouse is down error

javascript

jquery

mouseevent

fabricjs