typescript React-Konva按列表顺序保存rects

wljmcqd8  于 12个月前  发布在  TypeScript
关注(0)|答案(2)|浏览(92)

我做了对象的图形界面。我从服务器获取对象列表,例如:

0:{constructor_visible: true, fill_type: "free", id: "03e9fb06-663f-4ab8-ad31-ecbd8c2689a1",…}
1:{constructor_visible: true, fill_type: "free", id: "3a82daeb-67dc-407c-b1ee-db0e3fac7183",…}
2:{constructor_visible: true, error_msg: null, id: "34cf95f1-052a-4cfe-aed2-ceb2c8e4b042",…}
3:{constructor_visible: true, error_msg: null, id: "127ccecb-98fc-4deb-8eab-9dd0abd1eb49",…}
4:{constructor_visible: true, error_msg: null, id: "d62f977a-71ae-400f-aa86-ffd60717f9af",…}

在这里第一次看起来像

当我把它发布到服务器并再次返回时,它的顺序并不相同:

0:{constructor_visible: true, fill_type: "free", id: "7e5457e8-c51f-40fc-bdf4-1a52814f4183",…}
1:{constructor_visible: true, error_msg: null, id: "755b42b4-2933-4fef-a97a-9fa17c8af08f",…}
2:{constructor_visible: true, fill_type: "free", id: "3462394d-56be-4404-ab54-0c62257c7aae",…}
3:{constructor_visible: true, error_msg: null, id: "a7fa2cd9-6f32-4100-ac4f-2f3fd83e554a",…}
4:{constructor_visible: true, error_msg: null, id: "c9bcbbc4-cd70-4290-947a-a4a80a29680e",…}

在此之后,响应服务器

实际上,所有项目都会保存它们的属性,如x、y、width、height等。但canvas并不是重绘。此外,如果我刷新页面,它们将被绘制在正常位置,就像在它们的 prop 中一样。
我猜这是因为Konva在调用对象数组后没有重新绘制阶段。如何使用react-typescript解决这个问题?
我使用了stage.clear -> stage.draw; batchdraw.其他命名相似函数

zi8p0yeb

zi8p0yeb1#

这里有一个简单的解决方案。你销毁画布上以前的项目,然后绘制新的,你从服务器上得到的

layerRef.current?.children.map((item)=>item.destroy());
Konva.autoDrawEnabled;
layerRef.current?.draw();
vi4fp9gy

vi4fp9gy2#

我的解决方案是重新渲染JSX组件。我希望有人能找到更好的解决办法。

相关问题