fabri cjs: Как сделать так, чтобы объект canvas (прямоугольник) всегда был активным для мыши: событие down? - PullRequest
Новая
       47

fabri cjs: Как сделать так, чтобы объект canvas (прямоугольник) всегда был активным для мыши: событие down?

0 голосов
/ 04 марта 2020

Как сделать выделение объекта canvas (прямоугольника) всегда активным даже после события mouse:down? Я пытался с помощью свойства subTargetCheck:true; но это свойство не соответствует указанному требованию. 

this.fabricObject = new fabric.Rect({
  left: this.objectSize.left,
  top: this.objectSize.top,
  width: this.objectSize.width,
  height: this.objectSize.height,
  fill: '#ccc',
  padding: 10,
  subTargetCheck: true
});

this.canvas.add(this.fabricObject);
this.fabricObject.center().setCoords();
this.canvas.renderAll();

=> Код для набора всегда активен 

this.canvas.on('mouse:down', (e) => {
  console.log(e.target)
  this.canvas.getObjects().map((object:any) => {
    object.set('active', true);
    this.canvas.renderAll();
  })
});

=> Если я делаю это для цветовой заливки, то это работает нормально при событии отсутствия мыши. 

this.canvas.on('mouse:down', (e) => {
  console.log(e.target)
  this.canvas.getObjects().map((object:any) => {
    object.set('fill', 'green');
    this.canvas.renderAll();
  })
});

REF: https://jsfiddle.net/jasie/r3fqu4p6/12/

Как и в jsfiddle, при щелчке по квадрату он становится активным, а при щелчке по стороне квадрата - чтобы деактивировать ... так что я хочу, чтобы это тоже активно при нажатии за пределами этого квадрата.

1 Ответ

1 голос
/ 05 марта 2020

Вам необходимо использовать canvas.setActiveObject() для ручной установки активного объекта на холсте. 

var canvas = new fabric.Canvas("canvas");
var ourRect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 75,
    height: 50,
    fill: "green",
    padding: 10,
    subTargetCheck: true
});

canvas.add(ourRect);

canvas.on("mouse:down", object => {
    canvas.setActiveObject(ourRect);
});

Пожалуйста, проверьте эту демонстрационную версию CodeSansbox: https://codesandbox.io/s/stackoverflow-60522500-fabric-js-1720-ekocp

...