square-9-png

react.js 使用的九宫格图编辑器，可以快速定义九宫格模板，并将模板信息写入图片中，无需单独存储数据

作者: [e-mail]

---

一、编辑器

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>
    );
  }