Question

我目前将我的IText元素设置为单击进入编辑模式，但我仍然希望用户能够移动文本。我已经在文本元素中添加了填充，希望我可以区分边框上的单击（用户想要移动文本）与直接单击文本（编辑）。任何帮助将不胜感激..

Answer 1

对于对此感兴趣的人，我想出了一个解决方案。虽然这不是理想的，但它确实有效。您希望您的IText元素具有5个或更多像素的填充以获得良好的结果。

isOnBorder(mouseX, mouseY, coords, padding) {
    let topLeftX = coords.tl.x + padding;
    let topRightX = coords.tr.x - padding;
    let topLeftY = coords.tl.y + padding;
    let bottomLeftY = coords.bl.y - padding;

    if (mouseX < topLeftX || mouseX > topRightX) {
        return true;
    } else if (mouseY < topLeftY || mouseY > bottomLeftY) {
        return true;
    }

    return false;
}

侦听对象：画布上选定的事件

'object:selected': (event) => {
  let object = event.target;
  let mouseX = object._mousedownX;
  let mouseY = object._mousedownY;
  let coords = object.oCoords;
  let padding = object.padding;

  if (this.isOnBorder(mouseX, mouseY, coords, padding)) {
    return;
  }

如果用户未在边框的填充px内单击，请单击进入编辑

  object.enterEditing();

fabricjs - 允许单击文本编辑，但区分文本单击和边框单击

1 个答案: