gpt4 book ai didi

自定义形状的 Konva 序列化和反序列化

转载 作者:行者123 更新时间:2023-12-04 10:36:35 30 4
gpt4 key购买 nike

如何序列化和反序列化自定义 Konva Shape?

Konva 允许您使用sceneFunc 创建自定义形状,但是当您将其存储为JSON 并加载回来时,您怎么知道它是什么自定义形状?

最佳答案

要定义自定义形状,您需要定义 sceneFunc Demo :

function mySceneFunc(context, shape) {
context.beginPath();
context.rect(0, 0, shape.getAttr('width'), shape.getAttr('height'));
context.fillStrokeShape(shape);
}

var rect = new Konva.Shape({
fill: '#00D2FF',
width: 100,
height: 50,
name: 'my-custom-rect',
sceneFunc: mySceneFunc
});

不建议将函数序列化为 JSON。所以默认情况下 node.toJSON()不会有 sceneFunc属性(property)。

要恢复您的自定义形状,您只需在反序列化后在您的舞台中找到此类形状,然后应用 sceneFunc手动。您可以将自己的名称设置为此类形状以轻松找到它们。

var json =
'{"attrs":{"width":758,"height":300},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"fill":"#00D2FF","width": 100, "height": 100, "name": "my-custom-rect" },"className":"Shape"}]}]}';

// create node using json string
var stage = Konva.Node.create(json, 'container');

function mySceneFunc(context, shape) {
context.beginPath();
context.rect(0, 0, shape.getAttr('width'), shape.getAttr('height'));
context.fillStrokeShape(shape);
}

stage.find('.my-custom-rect').sceneFunc(mySceneFunc);
stage.draw()

演示: https://jsbin.com/sadehigina/1/edit?html,js,output

关于自定义形状的 Konva 序列化和反序列化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60153553/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com