vue 在线更换字体 字体列表使用node.js遍历

上图是效果预览
字体列表

更换字体

node 遍历字体文件列表
遍历函数

/**
 *
 * @param dirPath
 * @param arr
 */
function fileDisplay(dirPath, arr) {
    var filesList = fs.readdirSync(dirPath);
    for (var i = 0; i < filesList.length; i++) {
        //描述此文件/文件夹的对象
        var fileObj = {};
        let thePath = '/static/font/'+filesList[i]
        fileObj.path = thePath
        fileObj.name = filesList[i].split('.')[0];
        //拼接当前文件的路径(上一层路径+当前file的名字)
        var filePath = path.join(dirPath, filesList[i]);
        //根据文件路径获取文件信息，返回一个fs.Stats对象
        var stats = fs.statSync(filePath);

        if (stats.isDirectory()) {
            //如果是文件夹
            fileObj.type = 'dir';
            fileObj.child = [];
            arr.push(fileObj);
            //递归调用
            fileDisplay(filePath, arr[i].child);
        } else {

            //不是文件夹,则添加type属性为文件后缀名
            fileObj.type = path.extname(filesList[i]).substring(1);

            arr.push(fileObj);
        }
    }
}

接口

async font() {
        const {ctx} = this;
        let root = path.resolve(__dirname, '../font')
        let arr = [];
        fileDisplay(root, arr);
        ctx.body = {
            code: 200,
            message: '获取成功',
            data: arr,
        };
    }

文件列表

接口返回示例

注： 接口怎么做这个不一定用node写，可以php、python等，主要是遍历出ttf字体文件的列表

接下来是vue实现更换字体
data数据

data() {
      return {
        font: [], // 字体列表json
        fontfamily: '', // 当前选中的字体value
        choose: {} // 当前选中的字体对象
      }
    },

axios接口

fetchList().then(response => {
            console.log(response)
            this.font = response.data
          })

目的是请求我们做好的字体json接口，把数据保存到this.font当中
html

<el-select v-model="fontfamily" filterable placeholder="请选择" @change="handleChage">
          <el-option
            v-for="item in font"
            :key="item.path"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select>

handleChange methods函数

handleChage(value) {
        for (let i in this.font) {
          if (this.font[i].name === value) {
            this.choose = this.font[i]
            this.createStyle(this.choose)
            this.canvas.layers[this.type.index]['font-family'] = this.choose.name // 修改文字对象的字体value
            this.canvas.layers[this.type.index].text.font.name = this.choose.name // 修改文字对象的字体value
            this.$store.commit('setCanvas',this.canvas) // store commit提交当前字体的修改
          }
        }
      }, 

createStyle methods 函数 将字体font-face css添加到head 使其生效

createStyle(data) {
        if (document.getElementById(data.name) === null) {
          let dom = document.createElement('style')
          dom.innerHTML = `
          @font-face{
              font-family: '${data.name}';
              src : url('${data.path}');
          }
        `
          dom.setAttribute('id', data.name)
          document.querySelector('head').append(dom)
        }
      }

关于绑定css data 如： {width:‘200px’}

<div :style="[data]"></div>

如果有什么问题建议 可以私信我,本人小白一个。

文章转载自 原文地址