上图是效果预览
字体列表
更换字体
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>
如果有什么问题建议 可以私信我,本人小白一个。
文章转载自 原文地址