0.0.18 • Published 11 months ago
zenz-editor v0.0.18
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
0.0.18
11 months ago
0.0.17
12 months ago
0.0.16
12 months ago
0.0.15
12 months ago
0.0.14
12 months ago
0.0.13
12 months ago
0.0.12
12 months ago
0.0.11
12 months ago
0.0.10
12 months ago
0.0.9
12 months ago
0.0.8
12 months ago
0.0.7
12 months ago
0.0.6
12 months ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago