feat: Refactor the setFont and registerFont functions

Author: drawcall

CHANGELOG.md

@@ -1,3 +1,9 @@
+## v6.1.2
+* Add FFChart component, support most demos of echarts.js. Data visualization video can be made
+* Support the synthesis of dynamic data change charts.
+* Fix the problem of setScale initialization.
+* Refactor the setFont and registerFont functions.
+
 ## v5.5.6
 * FFVtuber supports dual types of sequence frame and video.
 * Delete the addVtuber method of FFCreator.

lib/node/chart.js

@@ -21,9 +21,9 @@
  */
 const echarts = require('echarts');
 const FFImage = require('./image');
-const Utils = require('../utils/utils');
+const CanvasUtil = require('../utils/canvas');
 const TimelineUpdate = require('../timeline/update');
-const { createCanvas, registerFont, Texture } = require('inkpaint');
+const { createCanvas, Texture } = require('inkpaint');
 
 const echartsPolyfill = () => {
   echarts.Model.prototype.isAnimationEnabled = () => true;
@@ -71,29 +71,8 @@ class FFChart extends FFImage {
    * @param {string} font - text font file path
    * @public
    */
-  setFont(fontFamily) {
-    if (/.*\.(ttf|otf|svg|woff|woff2|eot)$/gi.test(fontFamily)) {
-      this.setFontByFile(fontFamily);
-    } else {
-      const { ctx } = this;
-      ctx.font = fontFamily;
-    }
-  }
-
-  /**
-   * Set font if the font is a file
-   * @param {string} file - text font file path
-   * @private
-   */
-  setFontByFile(file) {
-    const fontFamily = 'f' + Utils.toHash(file);
-    if (!Utils.storage[fontFamily]) {
-      registerFont(file, { family: fontFamily });
-      Utils.storage[fontFamily] = true;
-    }
-
-    const { ctx } = this;
-    ctx.font = fontFamily;
+  setFont(font) {
+    CanvasUtil.setFont(font, fontFamily => (this.ctx.font = fontFamily));
   }
 
   /**

lib/node/subtitle.js

@@ -16,10 +16,10 @@ const probe = require('ffmpeg-probe');
 const forEach = require('lodash/forEach');
 const FFTween = require('../animate/tween');
 const DateUtil = require('../utils/date');
-const TimelineUpdate = require('../timeline/update');
+const CanvasUtil = require('../utils/canvas');
 const Materials = require('../utils/materials');
-const Utils = require('../utils/utils');
-const { registerFont, ProxyObj, Text } = require('inkpaint');
+const TimelineUpdate = require('../timeline/update');
+const { ProxyObj, Text } = require('inkpaint');
 
 const DIS = 40;
 const SIGN = '_$_';
@@ -146,29 +146,11 @@ class FFSubtitle extends FFNode {
 
   /**
    * Set text font file path
-   * @param {string} file - text font file path
-   * @public
-   */
-  setFont(fontFamily) {
-    if (/.*\.(ttf|otf|svg|woff|woff2|eot)$/gi.test(fontFamily)) {
-      this.setFontByFile(fontFamily);
-    } else {
-      this.setStyle({ fontFamily });
-    }
-  }
-
-  /**
-   * Set font if the font is a file
-   * @param {string} file - text font file path
+   * @param {string} font - text font file path
    * @public
    */
-  setFontByFile(file) {
-    const fontFamily = 'f' + Utils.toHash(file);
-    if (!Utils.storage[fontFamily]) {
-      registerFont(file, { family: fontFamily });
-      Utils.storage[fontFamily] = true;
-    }
-    this.setStyle({ fontFamily });
+  setFont(font) {
+    CanvasUtil.setFont(font, fontFamily => this.setStyle({ fontFamily }));
   }
 
   setStartTime(startTime = 0) {

lib/node/text.js

@@ -14,9 +14,9 @@
  * @class
  */
 const FFNode = require('./node');
-const Utils = require('../utils/utils');
 const isArray = require('lodash/isArray');
-const { registerFont, ProxyObj, Text } = require('inkpaint');
+const CanvasUtil = require('../utils/canvas');
+const { ProxyObj, Text } = require('inkpaint');
 
 class FFText extends FFNode {
   constructor(conf = { text: '', style: { fontSize: 28 } }) {
@@ -65,30 +65,11 @@ class FFText extends FFNode {
 
   /**
    * Set text font file path
-   * @param {string} file - text font file path
+   * @param {string} font - text font file path
    * @public
    */
-  setFont(fontFamily) {
-    if (/.*\.(ttf|otf|svg|woff|woff2|eot)$/gi.test(fontFamily)) {
-      this.setFontByFile(fontFamily);
-    } else {
-      this.setStyle({ fontFamily });
-    }
-  }
-
-  /**
-   * Set font if the font is a file
-   * @param {string} file - text font file path
-   * @public
-   */
-  setFontByFile(file) {
-    const fontFamily = 'f' + Utils.toHash(file);
-    if (!Utils.storage[fontFamily]) {
-      registerFont(file, { family: fontFamily });
-      Utils.storage[fontFamily] = true;
-    }
-
-    this.setStyle({ fontFamily });
+  setFont(font) {
+    CanvasUtil.setFont(font, fontFamily => this.setStyle({ fontFamily }));
   }
 
   /**

lib/utils/canvas.js

@@ -9,8 +9,9 @@
  *
  * @object
  */
-
-const { createCanvas, createImageData } = require('inkpaint');
+const FS = require('./fs');
+const Utils = require('./utils');
+const { createCanvas, createImageData, registerFont } = require('inkpaint');
 
 const CanvasUtil = {
   canvas: null,
@@ -85,6 +86,26 @@ const CanvasUtil = {
     return canvas;
   },
 
+  /**
+   * Set fonts and register new font files
+   * @param {string} font - text font file path
+   * @param {function} setFontFunc - Callback hook for element setting font
+   * @public
+   */
+  setFont(font, setFontFunc) {
+    if (FS.isFont(font)) {
+      const fontFamily = 'f' + Utils.toHash(font);
+      if (!Utils.storage[fontFamily]) {
+        registerFont(font, { family: fontFamily });
+        Utils.storage[fontFamily] = true;
+      }
+
+      setFontFunc(fontFamily);
+    } else {
+      setFontFunc(font);
+    }
+  },
+
   fillRect({ canvas, color }) {
     const context = canvas.getContext('2d');
     context.fillStyle = color;

lib/utils/fs.js

@@ -118,6 +118,15 @@ const FS = {
   getCacheFilePath(dir) {
     return path.join(dir, `%012d.${this.format}`);
   },
+
+  /**
+   * Check if it is a font file
+   * @param {string} font - input file
+   * @public
+   */
+  isFont(font) {
+    return /.*\.(ttf|otf|svg|woff|woff2|eot)$/gi.test(font);
+  },
 };
 
 module.exports = FS;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffcreator",
-  "version": "6.0.5",
+  "version": "6.1.2",
   "description": "FFCreator is a lightweight and flexible short video production library",
   "main": "lib/index.js",
   "types": "types/index.d.ts",