@hc-master/renderer

智能设计渲染组件

基于pixiJS的渲染引擎，处理智能设计项目的渲染数据JSON Schema，以数据驱动的形式渲染图形图像的React渲染组件

Install

从npm获取 @hc-master/renderer

npm install @hc-master/renderer

Usage

在你的react项目中引入

import { Renderer } from '@hc-master/renderer'
// resDataJson为智能设计项目数据
function App() {
  const [index] = useState(0);
  const curData = useMemo(() => resDataJson.jsonData[index], [index]);
  return (
    <div className='App'>
      <Renderer
         data={curData}
         designWidth={resDataJson.designWidth}
         designHeight={resDataJson.designHeight}
      />
    </div>
  )
}

Renderer组件文档

以下为组件的props详细

data

需要传入的解析的JSON，从智能设计服务获取

designWidth

渲染的画布尺寸宽度

designHeight

渲染的画布尺寸高度

pageNo 可选

标记当前页码（多页渲染时使用）

onMount

渲染组件挂载时的事件监听

onUnmount

渲染组件卸载时的事件监听

onCompleted

渲染组件完成渲染时的事件监听