En una aplicación que estoy creando, estoy usando fabricjs para representar texto en un lienzo. Quiero usar un botón para poner el texto en negrita, pero parece haber un problema con la forma en que se representa. En lugar de que suceda de forma asincrónica o al mismo tiempo, tengo que hacer clic fuera del texto seleccionado antes de que suceda algo. Realmente no sé cómo explicarlo muy bien, así que reproduje el desafío que tengo en un CodePen.
https://codepen.io/JojoDuke/pen/wvrgjaw
Código
//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"; })Al igual que el método es un lienzo asíncrono, espere un evento para tener en cuenta la modificación del elemento.
una forma es forzar la actualización del texto en el lienzo
para hacerlo puedes:
canvas.renderAll()canvas.add(text)todos estos métodos deben colocarse después de actualizar el atributo del elemento
boldBtn.addEventListener('click', async () => { text.fontWeight = await "bold"; canvas.add(text); }) normalBtn.addEventListener('click', async () => { text.fontWeight = await "normal"; canvas.add(text); })Como mencionó Jeremy, puede agregar el elemento al lienzo durante el evento asíncrono o forzar el lienzo para que vuelva a renderizar todos los elementos que contiene.
Ejemplo:
boldBtn.addEventListener('click', async () => { text.fontWeight = await "bold"; canvas.renderAll(); }) normalBtn.addEventListener('click', async () => { text.fontWeight = await "normal"; canvas.renderAll(); })Código de trabajo: https://codepen.io/carve-the-looper/pen/VwMbxpX