智能设计渲染组件

基于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.pagesData[index], [index]);
  const onMount = function(app) {
    console.log('==>>>::: 监听组件挂载');
  }
  const onCompleted = function(app) {
    console.log('==>>>::: 监听组件资源加载并渲染完成');
  }
  const onUnmount = function(app) {
    console.log('==>>>::: 监听组件卸载');
  }
  const handlePrev = function() {
    let v = indexRef.current-1;
    indexRef.current = v < 0 ? 0 : v
    setCurData(resDataJson.pagesData[indexRef.current])
  }
  const handleNext = function() {
    const count = resDataJson.pagesData.length-1;
    let v = indexRef.current+1;
    indexRef.current = v > count ? count : v;
    setCurData(resDataJson.pagesData[indexRef.current])
  }
  const handleChange = function() {
    const id = '9f6c1d44-d61c-4ad9-8f85-1d981f4548ce';
    const index = curData.stageJson.findIndex(item => item.id === id);
    // 找到指定数据
    const item = curData.stageJson[index] as FrameType;
    if (!item.photo) return
    // 改变数据内容
    item.photo = {
      ...item.photo,
      image: 'http://sts-test.gdoss.xstore.ctyun.cn/simooapp/debug/user_data/urqtj013qcgc0oct/photos/2023/08/14/1692008690_20230814_102450_159D15C9.jpg?x-amz-process=image/resize,m_fill,w_400,h_0',
      origHeight: 1501,
      origWidth: 1994,
      width: 400,
      height: 554,
      scale: {
        x: 4.98,
        y: 4.98
      },
      x: 0,
      y: 0
    };
    // 更新数据（Immutable Data）
    curData.stageJson[index] = {...item}
    setCurData({...curData})
  }
  return (
    <div className='App'>
      <Button onClick={handlePrev}>上页</Button>
      <Button onClick={handleNext}>下页</Button>
      <Button onClick={handleChange}>替换页内容</Button>
      <Renderer
         data={curData}
         designWidth={resDataJson.designWidth}
         designHeight={resDataJson.designHeight}
         onMount={onMount}
         onCompleted={onCompleted}
      />
    </div>
  )
}

Renderer组件文档

以下为组件的props详细

data

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

designWidth

渲染的画布尺寸宽度

designHeight

渲染的画布尺寸高度

pageNo 可选

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

onMount

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

onUnmount

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

onCompleted

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

onGetFontUrl

获取字体文件URL事件