0.4.2 • Published 2 years ago
square-9-png v0.4.2
square-9-png
react.js 使用的九宫格图编辑器,可以快速定义九宫格模板,并将模板信息写入图片中,无需单独存储数据
作者: chzh314@hotmail.com
一、编辑器
1. 使用方法
安装依赖
npm install --save square-9-png
安装完毕后, 在 react 组件中使用
import React, { useState } from 'react';
import Square from 'square-9-png';
...
function App() {
const [visible, setVisible] = useState<Boolean>(false);
return (
<Square
visible={visible}
onClose={() => {
setVisible(false);
}}
onExport={(file: Blob) => {
//TODO: 处理导出文件
}}
testWord="测试\n文本"
/>
);
}
2. 参数
参数名 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
visible | boolean | - | true | 编辑器是否可见 |
source | string | - | undefined | 默认使用九宫格底图 |
testWord | string | - | 这是一条测试文本 | 测试九宫格时显示的内容(可换行) |
onExport | (target:Blob)=>void | - | undefined | 用户点击导出时的处理方法 |
onClose | ()=>void | - | undefined | 用户点击关闭时的处理方法 |
项目依赖
1. antd v4 - UI组件
2. brower-image-combiner 用于导出PNG写入头信息的图形库
二、单独使用预览器
import React, { useState, use } from 'react';
import Previewer, { SquareInfoAdapter, SquareInfoExtractor, SquareInfo } from 'square-9-png/lib/previewer'
...
const url="***.png" //经过编辑器编辑过的九宫格图
const WIDTH = 400;
function App() {
const [previewInfo, setPreviewInfo] = useState<SquareInfo | null>(false);
useEffect(() => {
SquareInfoAdapter(SquareInfoExtractor(url))
.then((data) => {
setPreviewInfo(data);
})
.catch(console.error);
}, []);
return (
<div>
{previewInfo && <Previewer {...previewInfo} src={url} />}
</div>
);
}
0.4.1
3 years ago
0.4.0
3 years ago
0.4.2
2 years ago
0.3.5
3 years ago
0.3.4
3 years ago
0.2.19
3 years ago
0.3.2
3 years ago
0.3.1
3 years ago
0.3.3
3 years ago
0.2.18
3 years ago
0.2.17
3 years ago
0.2.16
3 years ago
0.2.15
3 years ago
0.2.14
3 years ago
0.2.13
3 years ago
0.2.11
3 years ago
0.2.10
3 years ago
0.2.9
3 years ago
0.2.7
3 years ago
0.2.6
3 years ago
0.2.8
3 years ago
0.2.5
3 years ago
0.2.3
3 years ago
0.2.2
3 years ago
0.2.4
3 years ago
0.1.0
3 years ago
0.2.0
3 years ago
0.1.1
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago