В моем приложении есть пользовательские фигуры, созданные с помощью konvajs, и ниже приведена строка json сцены. Однако, когда я использую строку json для загрузки сцены, она пуста.
var json = '{"attrs":{"width":986,"height":582.3984375},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"fill":"#00D2FF","strokeWidth":4,"draggable":true,"x":235.58193044034167,"y":99.56706993500848,"rotation":64.3272470520766,"scaleX":0.4839560176457046,"scaleY":0.48395601764570534,"skewX":5.925274218756312e-17},"className":"Shape"},{"attrs":{"rotation":64.32724705207748},"className":"Transformer"}]},{"attrs":{},"className":"Layer","children":[{"attrs":{"fill":"#00D2FF","strokeWidth":4,"draggable":true,"x":492.70053395991056,"y":308.6665397028166,"rotation":-61.82166185395733,"scaleX":0.324361869429112,"scaleY":0.3243618694291115,"skewX":-1.978572243831011e-16},"className":"Shape"},{"attrs":{"rotation":-61.82166185395704,"x":382,"y":137.94663769165763},"className":"Transformer"}]},{"attrs":{},"className":"Layer","children":[{"attrs":{"fill":"#00D2FF","strokeWidth":4,"draggable":true},"className":"Shape"},{"attrs":{},"className":"Transformer"}]}]}';
Konva.Node.create(json, `containerid`);
Я делаю здесь что-то не так? Пожалуйста, укажите мне правильное направление.
Спасибо.
В вашем JSON есть несколько узлов Shape
, которые представляют собой пользовательские фигуры. Согласно документации konva https://konvajs.org/docs/shapes/Custom.html, такие узлы должны иметь sceneFunc
для рендеринга чего-либо. Но функции не сериализуются в JSON, поэтому они не загружаются, и вы видите пустой холст.
После создания этапа вам, возможно, придется найти такие узлы и определить для них sceneFunc
.