kinetic.js 加载阶段...丢失的参考资料答案

【问题标题】：kinetic.js load stage...lost referenceskinetic.js 加载阶段...丢失的参考资料
【发布时间】：2013-04-16 14:49:34
【问题描述】：

我在理解如何 Kinetic.Node.create(myJson, '容器') 功能有效。

我有一个简单的项目。生成一个 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();
}

【问题讨论】：

标签： kineticjs

【解决方案1】：

来自 KineticJS documentation:

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

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

【讨论】：

从这个 create fromjson 工作的角度来看，这个答案给了我一点启示。它让我的撤消/重做方法超越了它:)。那我得另谋出路了。

【解决方案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 文件中。

【讨论】：