1.2.2 • Published 19 days ago
@hc-master/renderer v1.2.2
智能设计渲染组件
基于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事件
1.2.2
19 days ago
1.2.1
27 days ago
1.1.11
2 months ago
1.1.8
3 months ago
1.1.7
3 months ago
1.1.6
4 months ago
1.1.5
4 months ago
1.1.1
4 months ago
1.1.0
4 months ago
1.1.4
4 months ago
1.1.3
4 months ago
1.1.2
4 months ago
1.0.8
4 months ago
1.0.7
6 months ago
1.0.6
6 months ago
1.0.5
6 months ago
1.0.4
6 months ago
1.0.3
7 months ago
1.0.2
7 months ago
1.0.1
7 months ago
1.0.0
7 months ago
2.0.2
8 months ago