如何调整大小，然后用react redux渲染到画布上

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

本文关键字：redux react 然后 何调整 调整      更新时间：2023-09-26

我正在编写一个react redux应用程序，但不知道如何在调整画布大小后对其进行渲染。

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

因此，我试图做的是更新状态，然后一旦React渲染了新调整大小的画布，我就需要对其进行渲染（最好是在保持画布尺寸的同一个reducer中）。

目前，我正试图用redux thunk这样做：

导出const setWidthAndRender=（宽度）=>（调度）=>{dispatch（setWidth（width））；setTimeout（dispatch（renderToCanvas），10）；}；

不过，这不起作用。一旦我确定它已经由React渲染，我想以某种方式将renderToCanvas发送出去。

有什么想法吗？

您必须在画布状态中添加一个新属性，例如"newWidth"，如果您必须重新渲染画布，则该属性为true，如果您不需要，则为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

相关文章：