diff --git a/src/canvas/CanvasPool.js b/src/canvas/CanvasPool.js index abf056d..b850d39 100644 --- a/src/canvas/CanvasPool.js +++ b/src/canvas/CanvasPool.js @@ -8,7 +8,6 @@ class CanvasPool { } __createNewCanvas() { - console.log('create new canvas'); const canvas = (this.__ctx !== 'webgl') ? new OffscreenCanvas(1,1) : document.createElement('canvas'); canvas.acquire = this.acquireCanvas.bind(this, canvas); canvas.release = this.releaseCanvas.bind(this, canvas); diff --git a/src/nodes/Canvas2d/Text.js b/src/nodes/Canvas2d/Text.js index 7b63098..61a01f6 100644 --- a/src/nodes/Canvas2d/Text.js +++ b/src/nodes/Canvas2d/Text.js @@ -2,6 +2,8 @@ import Canvas2d from './Canvas2d'; import {waitForMedia} from '../../utils'; import {createCanvas, mediaSize, paintToCanvas} from '../canvas'; +const isEmpty = (x) => !x || Object.keys(x).length === 0; + export default class Resize extends Canvas2d { constructor() { @@ -27,7 +29,7 @@ export default class Resize extends Canvas2d { ] }, font: { - type: 'String', + type: 'Font', // {name, url, fontface} default: 'Arial', }, width: { @@ -57,10 +59,38 @@ export default class Resize extends Canvas2d { this._update(); } + /** + * + * @param {{name: string, url: string, fontface: FontFace}} font + */ + async loadFont(font) { + if (typeof font === 'string') { + return font + } else if (!font) { + return; + } + + if (font.name && !font.url && !font.fontface) { + return name; + } + if (font.name && font.url && isEmpty(font.fontface)) { + font.fontface = new FontFace(font.name, font.url); + } + + if (font.fontface) { + await font.fontface.load(); + if (!document.fonts.has(font.fontface)) { + await document.fonts.add(font.fontface) + } + return font.name; + } + } + async render({font, fontSize, text, color, width, height, textAlign, fontStyle}, canvas, ctx) { canvas.width = width; canvas.height = height; - ctx.font = `${fontStyle} ${fontSize}px ${font}`; + + ctx.font = `${fontStyle} ${fontSize}px "${(await this.loadFont(font)) || ''}"`; ctx.fillStyle = color; ctx.textAlign = textAlign; const x = textAlign === 'center' ? canvas.width /2 : diff --git a/src/nodes/Disable.js b/src/nodes/Disable.js new file mode 100644 index 0000000..d7d7ce7 --- /dev/null +++ b/src/nodes/Disable.js @@ -0,0 +1,26 @@ +import Node from './Node'; + +export default class Disable extends Node { + constructor() { + super('Disable', { + image: { + type: 'Image', + }, + disabled: { + type: 'Boolean', + default: false, + }, + }, { + image: { + type: 'Image', + }, + }, {}); + } + + async _update() { + if (!this.in.disabled.value) { + this.out.image.value = this.in.image.value; + } + } + +} \ No newline at end of file diff --git a/src/nodes/Font.js b/src/nodes/Font.js new file mode 100644 index 0000000..691c5dd --- /dev/null +++ b/src/nodes/Font.js @@ -0,0 +1,42 @@ +import Node from './Node'; + +export default class Font extends Node { + constructor() { + super('Font', { + fontSize: { + type: 'Number', + min: 1, + default: 50, + }, + fontStyle: { + type: 'String', + default: 'normal', + enum: [ + 'normal', + 'bold', + 'italic', + 'bold italic', + ] + }, + font: { + type: 'Font', + }, + }, { + fontSize: { + type: 'Number', + }, + fontStyle: { + type: 'String' + }, + font: { + type: 'Font', + }, + }, {}); + } + + async _update() { + this.out.font.value = this.in.font.value; + this.out.fontStyle.value = this.in.fontStyle.value; + } + +} \ No newline at end of file diff --git a/src/nodes/index.js b/src/nodes/index.js index 16dc048..3ceadb4 100644 --- a/src/nodes/index.js +++ b/src/nodes/index.js @@ -16,3 +16,7 @@ export {default as Blur} from './WebGL/Blur'; // Math export {default as Numbers} from './Math/Numbers'; export {default as NumberBinaryOperation} from './Math/NumberBinaryOperation'; +// Helpers +export {default as Font} from './Font'; +export {default as Disable} from './Disable'; +// export {default as Synchronize} from './Synchronize';