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

Question

如何使 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 中一样，当单击正方形时它将激活，当单击正方形的外侧时它将停用...所以我希望在单击该正方形外部时也能激活它。

Answer 1

您需要使用canvas.setActiveObject()在canvas上手动设置一个活动对象。

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/Whosebug-60522500-fabric-js-1720-ekocp

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

fabricjs: How to make the canvas object (rectangle) always active on mouse:down event also?

canvas

mouseevent

mouseout

fabricjs