fabricjs：如何使canvas对象（矩形）在mouse：out事件上也始终处于活动状态？

Question

即使mouse:out事件发生后，如何使对画布对象（矩形）的选择始终处于活动状态？我已经尝试过使用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中一样，当点击正方形时，它将变为活动状态；当点击正方形的一侧时，将被禁用...因此，我也希望在单击该正方形之外时也处于活动状态。

Answer 1

您需要使用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