vue-fabric-editor
基于fabric.js和Vue的图片编辑器,可自定义字体、素材、设计模板。
Demo 基于fabric.js和Vue的图片编辑器,可自定义字体、素材、设计模板。
yarn install
yarn serve
字体相关的文件在 src/assets/fonts
中,将字体文件放目录下,并将新添加的字体名称更新到 font.css
和 font.js
文件中。
// font.js
const cnList = [
{
"name": "汉体",
"fontFamily": "汉体"
},
{
"name": "华康金刚黑",
"fontFamily": "华康金刚黑"
}
]
const enList = []
export default [...cnList, ...enList]
/* font.css */
@font-face{
font-family: '汉体';
src : url('./cn/汉体.ttf');
}
@font-face{
font-family: '华康金刚黑';
src : url('./cn/华康金刚黑.ttf');
}
自定义模板的入口在 src/components/importTmpl.vue
组件中,可将模板图片与JSON文件放在 public/template
文件中,将数据拼在组件中即可展示。
这是一个自己在使用的设计编辑器项目,市场上有很多类似的收费的编辑器,作为一个开发人员,还是希望能够找到可便捷的扩展、定制的编辑器,如果你也有需求,欢迎一起来维护。 微信:13146890191