react-pixi Stage options.backgroundColor 不随状态改变
react-pixi Stage options.backgroundColor don't change with state
状态变化会影响其他 React-Pixi Stage 道具,例如高度或宽度。但是,当我尝试更改 Stack options.backgroundColor 时,backgroundColor 不会随状态更改而更改。
这是我的代码:
const edit = () => {
const StageElement = {
id: "ion-1212-2if",
__typename: "CanvasStage",
backgroundColor: "#CB6CE6",
width: 500,
height: 500,
} as StageElementType;
const [state, setState] = useState({
stage: StageElement
});
const { stage } = state;
// OnClick Canvas Elements
const onClickCanvas = () => {
setState({ ...state, stage: {...state, height: 400, width: 400, backgroundColor: "#38B6FF"}});
};
return (
<Layout metaTags={metaTags}>
<Box m="auto">
<Stage
width={stage.width}
height={stage.height}
raf={false}
renderOnComponentChange={true}
options={{
backgroundColor: getHexColorNumber(stage.backgroundColor),
}}
onClick={onClickCanvas}
>
<Graphics
draw={(g) => {
g.lineStyle(0);
g.beginFill(getHexColorNumber(stage.backgroundColor), 1);
g.drawCircle(300, 90, 60);
g.endFill();
}}
/>
</Stage>
</Box>
</Layout>
);
};
我在 github 个问题中得到了答案:github。com/inlet/react-pixi/issues/325#issuecomment-1047944615
状态变化会影响其他 React-Pixi Stage 道具,例如高度或宽度。但是,当我尝试更改 Stack options.backgroundColor 时,backgroundColor 不会随状态更改而更改。
这是我的代码:
const edit = () => {
const StageElement = {
id: "ion-1212-2if",
__typename: "CanvasStage",
backgroundColor: "#CB6CE6",
width: 500,
height: 500,
} as StageElementType;
const [state, setState] = useState({
stage: StageElement
});
const { stage } = state;
// OnClick Canvas Elements
const onClickCanvas = () => {
setState({ ...state, stage: {...state, height: 400, width: 400, backgroundColor: "#38B6FF"}});
};
return (
<Layout metaTags={metaTags}>
<Box m="auto">
<Stage
width={stage.width}
height={stage.height}
raf={false}
renderOnComponentChange={true}
options={{
backgroundColor: getHexColorNumber(stage.backgroundColor),
}}
onClick={onClickCanvas}
>
<Graphics
draw={(g) => {
g.lineStyle(0);
g.beginFill(getHexColorNumber(stage.backgroundColor), 1);
g.drawCircle(300, 90, 60);
g.endFill();
}}
/>
</Stage>
</Box>
</Layout>
);
};
我在 github 个问题中得到了答案:github。com/inlet/react-pixi/issues/325#issuecomment-1047944615