I have custom shapes in my application created using konvajs and below is the json string of the stage.however, when i use the json string to load the stage, it is blank.
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`);
Am i doing something wrong here? Please point me in the right direction.
Thankyou.
In your JSON you have several Shape nodes, which are custom shapes. According to konva docs https://konvajs.org/docs/shapes/Custom.html, such nodes must have sceneFunc to render something. But functions are not serialized into JSON, so they are not loaded and you see empty canvas.
After the stage is created, you may have to find such nodes and define sceneFunc for them.