Estoy experimentando con Node Canvas (una implementación de HTML5 Canvas en NodeJS), tratando de escribir texto simple en diferentes fuentes.
Puedo extraer bien los datos de fuentes del sistema usando la función getavailablefonts de la biblioteca de node-system-fonts de nodos, que me brinda datos como
[ { "path": "/Library/Fonts/AcademyEngravedLet.ttf", "postscriptName": "AcademyEngravedLetPlain", "family": "Academy Engraved LET", "style": "Plain", "weight": 400, "width": 5 }, { "path": "/Library/Fonts/Impact.ttf", "postscriptName": "Impact", "family": "Impact", "style": "Regular", "weight": 900, "width": 4 } ] En el lienzo en sí, puedo especificar la información de la fuente usando una cadena de font , como se documenta en w3schools.com/TAgs/canvas_font .
import { createCanvas } from "canvas"; import { WIDTH, HEIGHT } from "../config"; const write = (text, font, fontStyle) => { const canvas = createCanvas(WIDTH, HEIGHT); const ctx = canvas.getContext("2d"); ctx.fillStyle = "black"; ctx.font = `${Math.abs(WIDTH / Math.PI)}px ${font}`; ctx.fontStyle = fontStyle; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(text, WIDTH / 2, HEIGHT / 2, WIDTH - 20); // text, x, y, max width return canvas; }; Pero me cuesta asociar correctamente la family de fuentes y el style de los datos de la fuente con lo que debería incluirse en la propiedad ctx.font .
En el caso de Impact, una cadena de fuente 200px Impact me da una fuente predeterminada del sistema en lugar de la fuente Impact. Pero 200px Academy Engraved LET funciona bien.
Además, establecer la propiedad ctx.fontStyle en el valor de la propiedad de style de la fuente no parece hacer nada.
¿Hay documentación en alguna parte que explique cómo asignar fuentes del sistema a la propiedad de fuente de lienzo?
Después de un poco de excavación en la fuente de canvas real, tengo esto funcionando.
/** * Convert the font data into a font string. * * @param {string} size A font size string (eg 100px or 50%/55% etc) * @param {object} font The font data, including `{ style, family }` * @returns {string} The font string */ const stringifyFont = (size, { style, family }) => [style, size, family].filter(Boolean).map(String).join(" "); export default stringifyFont;También encontré útil registrar las fuentes, ya que eso me ayudó a eliminar las fuentes que, por varias razones, simplemente no funcionan.
import { registerFont } from "canvas"; const registerFonts = (fonts) => { fonts.forEach(({ path, family, weight, style }) => { registerFont(path, { family, weight, style }); }); }; export default registerFonts;