Блог

У меня есть несколько элементов (треугольников), и я хочу иметь возможность выделять (затенять) их при наведении курсора на каждый из них (наведение курсора мыши / mouse: move) и сбрасывать выделение, когда мышь не наведена.

Я пробовал это, но это ничего не дает. Ниже приведен мой код:

 var canvas = new fabric.Canvas('canvas');

var petal1 = new fabric.Triangle({
  width: 200,
  height: 300,
  fill: '#DBDBDB',
  left: 500,
  top: 350,
  angle: 200,
  strokeLineJoin: 'round',
  strokeWidth: 20,
  stroke: '#DBDBDB'
});

var petal2 = new fabric.Triangle({
  // same options as above
});

var petal3 = new fabric.Triangle({
  // same options as above
});

  canvas.on('mouse:over', function(e) {
    e.target.set('fill', 'red');
    canvas.renderAll();
  });

  canvas.on('mouse:out', function(e) {
    e.target.set('fill', 'green');
    canvas.renderAll();
  });


canvas.add(petal1, petal2, petal3);
  

Я добавил console.log(e.target); , но он ничего не напечатал.

Ваш фрагмент работает и проверьте target, прежде чем устанавливать для него свойство.

ДЕМОНСТРАЦИЯ

 var canvas = new fabric.Canvas('canvas');
var options = {
  width: 100,
  height: 200,
  fill: '#DBDBDB',
  strokeLineJoin: 'round',
  strokeWidth: 20,
  stroke: '#DBDBDB'
};
var petal1 = new fabric.Triangle(options);
var petal2 = new fabric.Triangle(options);
var petal3 = new fabric.Triangle(options);

canvas.on('mouse:over', function(e) {
  if(e.target){
    e.target.set('fill', 'red');
    canvas.requestRenderAll();
  }
});

canvas.on('mouse:out', function(e) {
  if(e.target){
    e.target.set('fill', 'green');
    canvas.requestRenderAll();
  }
});

canvas.add(petal1, petal2, petal3);  

 canvas{
  border:1px solid;
}  

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