如何对齐Fabric.js Textbox与div元素内的文本内容？

我需要同步编辑Fabric.js Textbox和div内的文本内容，但两者文本存在对齐偏差，在Edge浏览器中尤为明显——具体表现为Canvas上的绿色文本与div内的灰色文本在垂直、水平方向上均有偏移。即使给Textbox和div设置相同的文本高度，问题仍未解决，求实现二者文本精准对齐的方法。

核心问题分析 #

Fabric.js的Textbox与原生div的文本渲染机制存在差异，加上浏览器默认样式、坐标基准不统一，是导致对齐偏差的主要原因。需要从样式重置、坐标精确匹配、渲染参数对齐三个维度调整。

具体修改步骤 #

1. 清除div文本的默认边距与内边距

原生div自带默认margin和line-height，会导致文本位置偏移，必须重置：

#text {
  font-family: "Comic Sans";
  font-size: 30px;
  color: gray;
  font-style: italic;
  font-weight: bold;
  white-space: pre-wrap;
  border: 1px solid gray;
  margin: 0; /* 清除默认外边距 */
  padding: 0; /* 清除默认内边距 */
  line-height: 1.2; /* 与Fabric.js默认行高匹配 */
}

2. 精确匹配Textbox的位置与尺寸

div容器#textContainer定位为top:100px; left:100px，且#text有1px边框，因此Textbox的位置需要抵消边框偏移，宽度要与div内容区完全一致：

var textBox = new fabric.Textbox("", {
  left: 101, // 匹配div的left + 容器边框宽度
  top: 101, // 匹配div的top + 容器边框宽度
  width: 298, // 匹配div内容区宽度（300px - 2px边框）
  fontFamily: "Comic Sans",
  fontSize: 30,
  fontWeight: "bold",
  fontStyle: "italic",
  textAlign: "left",
  textAlignV: "top", // 设置文本垂直顶部对齐，与div基准统一
  editable: true,
  hasControls: false,
  editingBorderColor: "green",
  fill: "green",
  objectCaching: false,
  lineHeight: 1.2, // 与div行高统一
  padding: 0 // 清除Textbox默认内边距
});

3. 简化文本同步逻辑

原同步逻辑存在冗余，直接修改textContent即可：

function SyncText(content) {
  var textElem = document.getElementById("text");
  textElem.textContent = content;
}

修改后的完整代码 #

JavaScript

var canvas = (this.__canvas = new fabric.Canvas("c"));

var textBox = new fabric.Textbox("", {
  left: 101,
  top: 101,
  width: 298,
  fontFamily: "Comic Sans",
  fontSize: 30,
  fontWeight: "bold",
  fontStyle: "italic",
  textAlign: "left",
  textAlignV: "top",
  editable: true,
  hasControls: false,
  editingBorderColor: "green",
  fill: "green",
  objectCaching: false,
  lineHeight: 1.2,
  padding: 0
});

function addTextBox() {
  canvas.add(textBox);
}

function removeTextBox() {
  canvas.remove(textBox);
}

var textContainer = document.getElementById("textContainer");
textContainer.addEventListener("dblclick", (e) => {
  addTextBox();
  textBox.text = document.getElementById("text").textContent;
  canvas.setActiveObject(textBox);
  textBox.enterEditing();
});

canvas.on("text:changed", function (e) {
  var textBox = e.target;
  SyncText(textBox.text);
});

function SyncText(content) {
  var textElem = document.getElementById("text");
  textElem.textContent = content;
}

textBox.on("editing:exited", function () {
  removeTextBox();
});

CSS

#textContainer {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 300px;
  height: 200px;
  border: 1px solid darkgray;
  overflow: hidden;
}

#text {
  font-family: "Comic Sans";
  font-size: 30px;
  color: gray;
  font-style: italic;
  font-weight: bold;
  white-space: pre-wrap;
  border: 1px solid gray;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
<canvas id="c" width="600" height="600" style="border:1px solid #ccc"></canvas>
<div id="textContainer">
  <div id="text">Freedom</div>
</div>

效果说明 #

通过以上修改，Textbox与div的文本会在Edge及其他主流浏览器中保持精准对齐，同步编辑时内容位置完全匹配。

内容的提问来源于stack exchange，提问作者personax