square-9-png

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

作者: [email protected]

一、编辑器

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