### 项目作用

此项目是针对图文编辑器的开源项目，主要作用是基于 canvas 的图文编辑器，此项目提供了针对 canvas 编辑器的丰富 API，用以开发者降级开发门槛，我们的项目在持续建设完善中，欢迎您的加入。


### 如何使用

1. 下载安装此项目

```javascript
npm install editor-render

2. 在项目中引用

import { useEffect, useRef, useState } from 'react';
import EditorRender from '@tencent/editor-render';

const App = () => {
  const canvasDom = useRef(null);
  // 画布操作的API，在子组件中可以直接使用
  // 使用例子：editorRenderApi.handler.commonHandler.findById('xxxx')
  const [editorRenderApi, setEditorRenderApi] = useState();

  useEffect(() => {
    if (!canvasDom) return;
    // 此处设置画布操作的API
    setEditorRenderApi(canvasDom.current);
  }, [canvasDom]);
  // 注册事件例子
  const onModified = (target: Object, key: string, value: string) => {};

  return (
    <div className="App">
      <EditorRender.canvas ref={canvasDom} onModified={onModified}></EditorRender.canvas>
    </div>
  );
};

export default App;

对外的开放api

1. 下载安装此项目

// 因为前后端的差异，因此fabric和axios库需要前端或者后端独立下载
npm install editor-render fabric axios

2. 使用API

import editorRender from 'editor-render';

// 因为前后端的差异问题，因此在前端是可以直接传入PSD文件的ArrayBuffer数据即可得到解析后的json
// 后端需要使用fs读取文件后使用ag-psd能力读取后传入json数据后即可得到解析后的json

// PSD解析接口--前端使用
const parse = new editorRender.ParsePSDHandler();
const jsonData = parse.parsePSD(bufferData);

// PSD解析接口--后端使用
import { readPsd } from 'ag-psd';
import 'ag-psd/initialize-canvas'; // 兼容后端的canvas画布读取

const fs = require('fs');
const buffer = fs.readFileSync('test.psd');
const psd = readPsd(buffer);
const parse = new editorRender.ParsePSDHandler();
const jsonData = parse.parsePSD(psd);

// Figma解析接口--前后端通用
const parse = new editorRender.ParseFigmaHandler();
const jsonData = await parse.parseFigmaAsync('fileId', 'toekn');

// 因为后端字体加载只能读取本地字体，因此后端读取字体需要独立写，使用fabric.nodeCanvas.registerFont方法
// 后端参考文档 http://fabricjs.com/fabric-intro-part-4
// 加载字体接口--前端
editorRender.utils.loadFontAsync(name: string, data: string | ArrayBuffer);

// 渲染图片接口--前后端通用
editorRender.utils.renderImageAsync({ format, quality, multiplier, json, width, height })

// json转svg
editorRender.utils.toSVGAsync({ json, width, height, options })