1

我想在一个页面上显示 2 个画布，这些画布以类的状态存储在一个数组中。基本代码-

constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.myRef1 = React.createRef();
    this.state = {
        isDrawing: false,
        startX: 0,
        startY: 0,
        boards: [<canvas className="wb-canvas" ref={this.myRef} width={800} height={400} id={1} />, <canvas className="wb-canvas" ref={this.myRef1} width={800} height={400} id={2} />],
    };
}

我有一个切换按钮，点击它应该切换两个板。switch()功能-

switch() {
    let a = this.state.boards[0];
    let b = this.state.boards[1];
    this.setState({
        boards: [b, a],
    });
    console.log(this.state.boards);
}

假设我在顶部画布上画了一棵树，在底部画了一朵花。点击切换后，两个画布元素切换成功（在开发者工具中可见），但树仍然出现在顶部，花朵在底部，即看起来好像画布没有在网页上切换。

我尝试将ctx.save()andctx.restore()用于画布，但这似乎也不起作用。

我很困惑为什么会这样？我在这里做错了什么？

4

0 回答 0