Как удалить предыдущий добавленный объект прямоугольника в Fabric? - PullRequest
Новая
       7

Как удалить предыдущий добавленный объект прямоугольника в Fabric?

0 голосов
/ 23 мая 2018

При событии щелчка мыши на холст добавляется прямоугольник: 

    canvas.on({
        'mouse:down': function(options) {
            canvas.add(new fabric.Rect({
                left: options.e.clientX,
                top: options.e.clientY,
                fill: 'red',
                width: 20,
                height: 20
            }));
        }
    });

Если я щелкаю где-то еще, рисуется второй прямоугольник и так далее.Я хочу удалить предыдущий прямоугольник для каждого нового события щелчка мышью.Я не могу использовать animate () в этом случае, потому что в моем приложении будет нарисовано много прямоугольников, и мне нужно просто перерисовать новые прямоугольники в новых местах, не перемещая каждый из них.

В нативном холсте я мог просто использовать clearRect(), чтобы очистить весь холст и перерисовать новый прямоугольник на новом месте.Как я могу сделать что-то подобное при использовании Fabric.js?

1 Ответ

0 голосов
/ 23 мая 2018

Вы можете создать только один прямоугольный объект и изменить его положение left и top для последующих событий нажатия мыши.

DEMO 

var canvas = new fabric.Canvas('canvas',{selection:false});
var rect = new fabric.Rect({
  fill: 'red',
  width: 20,
  height: 20,
  visible:false
});

canvas.add(rect);

canvas.on('mouse:down', function(options) {
  var pointer = canvas.getPointer(options.e);
  rect.set({
    left: pointer.x,
    top: pointer.y,
    visible:true
  });
  canvas.renderAll();
});
canvas{
 border:2px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canvas' width=500 height=400>
...