在拖动 FabricJS 对象之前需要选择

Question

如果要更改未选中或非活动文本框对象的位置，则必须在将其拖动到新位置之前选择它。我宁愿通过向上移动光标到对象并且仅单击对象来移动它。

Answer 1

我使用鼠标悬停事件来处理这个问题。将鼠标悬停事件绑定到对象(在我的例子中是 TextBox(并通过传递对象在画布上应用 setActiveObject(( 方法解决了这个问题。这是代码：

this.canvas = new fabric.Canvas('canvas');
let text = new fabric.Textbox('Enter text here', {
  fontFamily: 'Helvetica',
  fill: "#C0C0C0",
  textAlign: 'center',      
  borderColor: '#00c6d2',
  editingBorderColor: '#00c6d2',
  padding: 15,
  originX: 'center',
  originY: 'center',
  width: 300,
});
text.on('mouseover', (e) => {
  this.canvas.setActiveObject(text);
});
this.canvas.add(text);
this.canvas.centerObject(text);
this.canvas.renderAll();

马克鲁普如下：

<canvas id="canvas" width="500" height="500"></canvas>