Question

我有一个问题，了解如何 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();
}

Answer 1

来自KineticJS documentation：

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

所以我相信，局部变量赋值的变量也不起作用，因此也就是你的问题。我正在开展一个类似的项目，你的问题让我有另一件事需要担心:(但是为了抬头+1：）

Answer 2

这取决于你调用函数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文件中。

kinetic.js加载阶段...丢失参考

2 个答案: