2

我在理解 Kinetic.Node.create(myJson, 'container') 函数的工作原理时遇到了问题。

我有一个简单的项目。生成一个 circleLayer 并添加一个圆。现在我可以通过 circleLayer.removeChildren(); 删除圆圈；但是当我将舞台保存到 JSON 并重新加载它时，对圆圈的引用丢失了……现在我不能再删除它了……这是我的代码。

有人有想法吗？

var myJson;
var stage;
var circleLayer;
var myWidth = 500;
var myHeigth = 350;

function createStagesAndLayer() {

    stage = new Kinetic.Stage({
        container: 'container',
        width: myWidth,
        height: myHeigth
    });

    circleLayer = new Kinetic.Layer();
    stage.add(circleLayer);
}
function deleteCircle() {
    circleLayer.removeChildren();
    circleLayer.draw();
}
function saveData() {
    myJson = null;
    myJson = stage.toJSON();
}function loadData() {
    if (myJson == null) {
        alert("Keine Daten gefunden!!");
        return;
    }


   // I need to remoce it...otherwise my drawing area will grow. But I think here somewhere is the problem
    stage.remove(circleLayer);
    stage = Kinetic.Node.create(myJson, 'container');
}
function generateCircle() {
   var  circle = new Kinetic.Circle({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2,
        radius: 30,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 2,
        draggable: true
    });
    circleLayer.add(circle);
    circleLayer.draw();
}
4

2 回答 2

2

来自 KineticJS文档：

Kinetic.Node.create(JSON, container) 使用 JSON 字符串创建节点。反序列化不会生成自定义形状绘制函数、图像或事件处理程序（这会使序列化对象变得巨大）。如果您的应用程序使用自定义形状、图像和事件处理程序（可能会），那么您需要在加载舞台后选择适当的形状并通过 on()、setDrawFunc() 和 setImage() 方法设置这些属性

所以我相信，局部变量赋值的变量也不起作用，因此你的问题。我正在做一个类似的项目，你的问题让我担心另一个问题:(但是+1提醒:)

于 2013-04-17T09:34:35.293 回答
0

这取决于您调用函数 saveData() 的位置。如果您先删除 circleLayer 而不是保存舞台，那么您的圈子肯定会丢失。

如果您不会松开对圆圈的引用，请尝试将其隐藏，而不是删除。

circle.hide();

如果您生成了多个圈子，您可以在圈子创建中使用 id 或名称来隐藏所有圈子。

例子：

function generateCircle() {
var  circle = new Kinetic.Circle({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 30,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 2,
    draggable: true,
    name: circle
});
circleLayer.add(circle);
circleLayer.draw();
}

var Circle_hide = circleLayer.get('.circle');

if (Circle_hide[0].attrs.visible == true){
    for (var i=0; i < Circle_hide.length; i++){
   Circle_hide[i].hide();
}
}
else {
for (var i=0; i < Circle_hide.length; i++){
   Circle_hide[i].show();
}
}
circleLayer.draw();

您可以添加一个按钮单击事件来隐藏或显示圆圈，可以将数据保存到 JSON 并且圆圈仍将保存在您的 JSON 文件中。

于 2013-04-17T13:02:47.640 回答