Zenz-Editor

• 一套基于 TypeScript 开发的菲票编辑器
• 内置 Vue 以便调试
• 支持 Sass

使用方法

安装 npm i zen-editor

<div id="container"></div>

import * as Zenz from 'zenz-editor'

// 数据源
const dataSource = {
    text: '文本内容',
    image: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
};

// 创建编辑器
const editor = new Zenz.Editor(document.querySelector('#container'), dataSource);

// 创建文本
const text = new Zenz.Text({
    position: {
        x: 10,
        y: 10
    }
});
editor.addChild(text);
// 添加数据填充器
editor.filler.add(text, 'text', 'content');

// 创建图片
const image = new Zenz.Image({
    position: {
        x: 120,
        y: 10
    }
});
editor.addChild(image);
// 添加数据填充器
editor.filler.add(image, 'image', 'url');

// 添加几何图形
// 矩形
const geometry = new Zenz.Geometry({
    position: {
        x: 10,
        y: 80
    },
    graphical: Zenz.Graphical.Rectangle
});
editor.addChild(geometry);

// 修改文本数据源
editor.filler.data.text = '新的文本内容';

// 输出图片
editor.exportImage(); // base64