Обработчик события для выбора объекта на холсте fabricjs - PullRequest
Новая
       10

Обработчик события для выбора объекта на холсте fabricjs

1 голос
/ 16 октября 2019

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

Я пытался использовать selection: created и object: selected события для обработки того же самого, но это работает только тогда, когда пользователь выбирает элемент, а затем нажимает на другое место на холсте, а затем пытается выбрать другой элемент, он работает отлично, но когда пользователь нажимает на один элемент (срабатывает обработчик события)и затем нажимает на другой элемент, который не вызывает обработчик события. Как мне справиться с этим?

Я вижу, что есть возможность использовать, как упомянуто здесь, в проблеме с selection:created и selection:updated https://github.com/fabricjs/fabric.js/issues/4886

Но есть ли способ, которым я мог бы использовать их вместе? 

const canvas = new fabric.Canvas('paper', {
  preserveObjectStacking: true,
  enableRetinaScaling: false,
  imageSmoothingEnabled: false
});
canvas.setHeight(500);
canvas.setWidth(700);


const red = new fabric.Rect({
	id: 'red',
  left: 10,
  top: 10,
  width: 100,
  height: 100,
  fill: 'red'
});

const green = new fabric.Rect({
	id: 'green',
  left: 150,
  top: 150,
  width: 100,
  height: 100,
  fill: 'green'
});

canvas.add(red);
canvas.add(green);

canvas.renderAll();

canvas.on("selection:created", function(obj){
	alert(obj.target.id)
});
canvas.on("selection:updated", function(obj){
	alert(obj.target.id)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

1 Ответ

1 голос
/ 16 октября 2019

Вот довольно простое решение, объединяющее оба обработчика событий и связывающее их оба с одним и тем же методом. Это будет простым решением для этого. Любые лучшие решения будут оценены. 

canvas.on({
  'selection:updated': HandleElement,
  'selection:created': HandleElement
});

function HandleElement(obj){
   //Handle the object here 
}
...