我如何调整大小，然后使用 react-redux 渲染为 canvas

Question

我正在编写一个 react-redux 应用程序，无法弄清楚如何在调整大小后呈现 canvas。

基本上，我有两个滑块，它们在更改时会更新 canvas 的宽度和高度。在我的减速器中，我可以在此状态更新期间渲染到 canvas。但是，一旦 canvas 收到新的维度，它就会被清除。

所以，我要做的是更新状态，然后一旦 React 渲染了新调整大小的 canvas，我需要渲染它（最好在同一个减速器中持有 canvas 尺寸）。

目前，我正在尝试像这样使用 redux-thunk 来做到这一点：

export const setWidthAndRender = (width) => (dispatch) => {
  dispatch(setWidth(width));

  setTimeout(dispatch(renderToCanvas), 10);
};

不过这行不通。一旦我确定它已被 React 渲染，我想以某种方式调度 renderToCanvas。

有什么想法吗？

Answer 1

您必须向您的 canvas 状态添加一个新的属性，例如 "newWidth" 如果您必须重新呈现您的 canvas，这将是正确的如果不需要，则为 false。

您的函数 setWidth 应将 newWidth 更改为 true，以便组件在下一次调用 "componentDidUpdate" 时知道您的宽度已更改。

componentDidUpdate() 应该是这样的

componentDidUpdate(){
        let {newWidth} = this.props.canvasProps
        let {renderToCanvas} = this.props.actions;

        if(newWidth === true){
            renderToCanvas(); // Set newWidth to false inside renderToCanvas()
        }
    }

这种方式应该可行:P

我如何调整大小，然后使用 react-redux 渲染为 canvas

How can I resize, then render to a canvas with react-redux

javascript

html

canvas

reactjs

react-redux