javascript - 反应钩子没有从库事件(FabricJS)的回调函数中返回更新的状态值
问题描述
我没有在像 object:modified、mouse:up 等这样的 FabricJS 事件中获取更新的状态值……但我可以在回调函数中设置状态值。
当我试图获取状态值时,它返回的是初始值而不是更新的值。
例子:
const [count, setCount] = useState(0);
初始值为 0。我使用 setCount 将值更新为 1。每当我尝试在回调函数中获取“计数”时,它都会返回 0 或初始值。
编辑:
我想要实现的是,每当修改对象(对于撤消、重做操作)时,我都会尝试保存 FabricJS 对象。每当一个对象发生变化时,FabricJS 都会触发一个事件并调用组件中的一个函数。但我没有得到状态值。
代码:
function MyFunction()
{
const [canvasObj, setCanvasObj] = useState({});
const [state, setCanvasState] = useState('');
const [undo, setUndo] = useState([]);
useEffect(() => {
if(Object.keys(canvasObj).length == 0) {
var _canvas = new fabric.Canvas('canvas', {
preserveObjectStacking: true,
});
setCanvasObj(_canvas);
_canvas.on("object:modified", saveState);
}
});
function saveState() {
console.log(canvasObj); // Returns null even though object initialised
if (state) { // state value returns null. Due to this, I can't get the existing data and push the current state
let newState = undo;
newState.push(state);
setUndo(newState);
}
const tmpState = JSON.stringify(canvasObj);
setCanvasState(tmpState);
}
}
解决方案
这是有关如何在反应组件中保存画布状态的一般示例。您需要一个单独的变量来跟踪画布历史更改:
import React, { useRef, useEffect, useCallback, useState } from "react";
import { fabric } from "fabric";
export default function App() {
const canvasRef = useRef();
const [canvas, setCanvas] = useState();
// Array of objects, that represents canvas state history
const [canvasHistory, setCanvasHistory] = useState([initialState]);
const [canvasState, setCanvasState] = useState(initialState);
const onObjectModified = useCallback(
e => {
const newCanvasState = e.target.canvas.toJSON();
setCanvasState(newCanvasState);
// Limit history depth
setCanvasHistory(history => [...history, newCanvasState].slice(-4));
},
[setCanvasState, setCanvasHistory]
);
useEffect(() => {
const canvas = new fabric.Canvas(canvasRef.current);
canvas.loadFromJSON(initialState);
canvas.on("object:modified", onObjectModified);
setCanvas(canvas);
// Don't forget to destroy canvas and remove event listeners on component unmount
return () => canvas.dispose();
}, [canvasRef, onObjectModified, setCanvas]);
const moveHistory = useCallback(
step => {
const currentStateIndex = canvasHistory.indexOf(canvasState);
const prevState = canvasHistory[currentStateIndex + step];
canvas.loadFromJSON(prevState);
setCanvasState(prevState);
},
[canvas, canvasState, canvasHistory, setCanvasState]
);
const onUndo = useCallback(() => moveHistory(-1), [moveHistory]);
const onRedo = useCallback(() => moveHistory(1), [moveHistory]);
return (
<div>
<button onClick={onUndo} disabled={canvasHistory[0] === canvasState}>
Undo
</button>
<button
onClick={onRedo}
disabled={canvasHistory[canvasHistory.length - 1] === canvasState}
>
Redo
</button>
<canvas ref={canvasRef} width="300" height="300" />
</div>
);
}
另外,我在这里做了一个最小的工作示例
推荐阅读
- python - Running a process as a different user from Python *and* print exit code
- google-cloud-platform - 为什么通过谷歌云 BigQuery API 从谷歌播放控制台查询报告会给出不完整的结果
- c# - UNITY:如何获取 SafeArea 矩形的坐标?
- powershell - New-AzStorageDirectory -Directory "" -Path "" 的问题
- c++ - 未找到 PluginOneSignal/PluginOneSignal.h' 文件
- python-3.x - PyTorch:通过生成的模型运行看不见的文本
- kubernetes - 用于出站 https 流量的 Envoy 过滤器
- android - android - 如何复制 Android 10 设置
- button - 通过 rasa x 测试的聊天机器人 rasa 上未显示我的按钮
- c# - 为什么在将一种编码中的字节转换为不同编码中的字符串时需要 Encoding.Convert?