javascript - 如何在图像上添加可编辑的文本字段？

Question

我想找出一种方法来复制他们在这里拥有的东西: https://realsteelcenter.com/collections/monograms/products/family-name-circle-monogram

我知道他们正在使用 Canvas，但我对 JS 还是很陌生，所以我很难弄清楚这一点。有很多网站使用这样的东西，我很惊讶我没有找到任何关于这个的东西。我真的很希望找到解释如何执行此操作的 YouTube 视频，但没有成功。

任何能将我推向正确方向的建议都将受到赞赏。

Answer 1

从 input type="text" 开始您可以在其中输入名称和 canvas 的字段渲染所有内容。在 JavaScript 中监听 input input 上的事件这样您就可以在每次更改输入值时更新当前文本。

现在在您的 Canvas 中，您需要输出由您的输入设置的文本值。您可以在 input 的事件处理程序中执行此操作事件。因此，每次用户更改输入时，使用 clearRect 清除 Canvas (否则它会覆盖前一个词)上下文的方法，然后使用 fillText 在 Canvas 中绘制单词方法。你必须做一些额外的数学计算来计算文本的正确位置，并且可以使用 measureText 来计算方法。

我在下面添加了一个示例，希望它能帮助您朝着正确的方向开始。

const text = document.getElementById('name');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const fontSize = 32;

canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
ctx.font = `${fontSize}px sans-serif`;

text.addEventListener('input', function(event) {
  const textValue = event.target.value;
  const { width } = ctx.measureText(textValue);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText(textValue, (canvas.width / 2) - (width / 2), (canvas.height / 2) + (fontSize / 2));
});

#canvas {
  display: block;
  width: 400px;
  height: 250px;
  border: 1px solid black;
  margin-bottom: 30px;
}

<canvas id="canvas"></canvas>
<label for="name">Enter a name</label>
<input type="text" id="name">