Konvajs 文本框在编辑时不会保持位置

如何解决Konvajs 文本框在编辑时不会保持位置

我有一个小问题。我的 Konvajs 应用程序运行良好，但是当您双击文本节点时，文本框通常会在当前文本位置的上方、左侧或下方使用转换器进行缩放。我不知道为什么会发生这种情况，有人能指出我正确的方向吗？

代码如下：（文本是一个 Konva.text 对象）

text.on("dblclick",() => {
  text.hide();
  transformer.hide();
  state.layer.draw();
  let textPosition = text.absolutePosition();
  let stageBox = state.stage.container().getBoundingClientRect();
  let areaPosition = {
    x: stageBox.left + textPosition.x,y: stageBox.top + textPosition.y
  };
  let textarea = document.createElement("textarea");
  window.document.body.appendChild(textarea);
  textarea.value = text.text();
  textarea.style.position = "absolute";
  textarea.style.top = areaPosition.y + "px";
  textarea.style.left = areaPosition.x + "px";
  textarea.style.width = text.width() - text.padding() * 2 + "px";
  textarea.style.height = text.height() - text.padding() * 2 + 5 + "px";
  textarea.style.fontSize = text.fontSize() + "px";
  textarea.style.border = "none";
  textarea.style.padding = "0px";
  textarea.style.margin = "0px";
  textarea.style.overflow = "hidden";
  textarea.style.background = "none";
  textarea.style.outline = "none";
  textarea.style.resize = "none";
  textarea.style.lineHeight = text.lineHeight();
  textarea.style.fontFamily = text.fontFamily();
  textarea.style.transformOrigin = "left top";
  textarea.style.textAlign = text.align();
  textarea.style.color = text.fill();
  let rotation = text.rotation();
  let transform = "";
  if (rotation) {
    transform += "rotateZ(" + rotation + "deg)";
  }
  let px = 0;
  let isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
  if (isFirefox) {
    px += 2 + Math.round(text.fontSize() / 20);
  }
  transform += "translateY(-" + px + "px)";
  textarea.style.transform = transform;
  textarea.style.height = "auto";
  textarea.focus();

  // start
  function removeTextarea() {
    textarea.parentNode.removeChild(textarea);
    window.removeEventListener("click",handleOutsideClick);
    text.show();
    transformer.show();
    transformer.forceUpdate();
    state.layer.draw();
  }

  function setTextareaWidth(newWidth) {
    if (!newWidth) {
      // set width for placeholder
      newWidth = text.placeholder.length * text.fontSize();
    }
    // some extra fixes on different browsers
    let isSafari = /^((?!chrome|android).)*safari/i.test(
      navigator.userAgent
    );
    let isFirefox =
      navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
    if (isSafari || isFirefox) {
      newWidth = Math.ceil(newWidth);
    }

    let isEdge = document.documentMode || /Edge/.test(navigator.userAgent);
    if (isEdge) {
      newWidth += 1;
    }
    textarea.style.width = newWidth + "px";
  }

  textarea.addEventListener("keydown",function(e) {
    // hide on enter
    // but don't hide on shift + enter
    if (e.keyCode === 13 && !e.shiftKey) {
      text.text(textarea.value);
      removeTextarea();
    }
    // on esc do not set value back to node
    if (e.keyCode === 27) {
      removeTextarea();
    }
  });

  textarea.addEventListener("keydown",function(e) {
    let scale = text.getAbsoluteScale().x;
    setTextareaWidth(text.width() * scale);
    textarea.style.height = "auto";
    textarea.style.height = textarea.scrollHeight + text.fontSize() + "px";
  });

  function handleOutsideClick(e) {
    if (e.target !== textarea) {
      text.text(textarea.value);
      removeTextarea();
    }
  }
  setTimeout(() => {
    window.addEventListener("click",handleOutsideClick);
  });
  // end
});