Fabricjs 文本样式不是异步的

Question

在我正在构建的应用程序中，我使用 fabricjs 将文本呈现到 canvas。我想使用一个按钮将该文本设为粗体，但它的呈现方式似乎存在问题。它不是异步或同时发生的，而是我必须在任何事情发生之前单击所选文本之外的地方。我真的不知道如何解释得太清楚，所以我在 CodePen 中重现了我遇到的挑战。
https://codepen.io/JojoDuke/pen/wvrgjaw

代码

//HTML
<canvas id="canvas" width="600" height="100"></canvas>
<button id="boldBtn">Make Bold</button>
<button id="normalBtn">Make Normal</button>

//Script
const boldBtn = document.getElementById('boldBtn');
const normalBtn = document.getElementById('normalBtn');
const canvas = new fabric.Canvas('canvas', {
  backgroundColor: 'grey',
});

const text = new fabric.IText('Type text here', { 
                      left: 100, 
                      top: 10,
                    });

canvas.add(text);
canvas.renderAll();

boldBtn.addEventListener('click', async () => {
  text.fontWeight = await "bold";
})

normalBtn.addEventListener('click', async () => {
  text.fontWeight = await "normal";
})

Answer 1

好像这个方法是异步的canvas在它上面等待一个事件来考虑元素修改

一种方法是强制刷新 canvas

中的文本

你可以这样做:

强制 canvas 使用 canvas.renderAll()
或者用canvas.add(text)

所有这些方法都应该在您更新元素属性后放置

boldBtn.addEventListener('click', async () => {
  text.fontWeight = await "bold";
  canvas.add(text);
})

normalBtn.addEventListener('click', async () => {
  text.fontWeight = await "normal";
  canvas.add(text);
})

Answer 2

正如 Jeremy 提到的，您可以在异步事件期间将元素添加到 canvas 或强制 canvas 重新呈现其中包含的所有元素。

示例：

boldBtn.addEventListener('click', async () => {
  text.fontWeight = await "bold";
  canvas.renderAll();
})

normalBtn.addEventListener('click', async () => {
  text.fontWeight = await "normal";
  canvas.renderAll();
})

工作代码笔：https://codepen.io/carve-the-looper/pen/VwMbxpX

Fabricjs 文本样式不是异步的

Fabricjs text styling not asynchronous

javascript

fabricjs