用kinetijs中的所有元素加载舞台

Question

我尝试从json文件加载我的简单stage，我加载图像，但它都在一个层中，并且图像不在组中，所以调整大小不起作用，我不知道应该如何加载所有具有层和组的元素；

这是我加载的功能（这是目前唯一的图像）

   function load(loadStage) {
    counter = 2;
    activeStage = stage;
    stage = Kinetic.Node.create(loadStage,'right');
    var background = stage.get('.background');
    var backgroundImage = stage.get('.backgroundImage');
    var clipartsImage = stage.get('.image');
    var text = stage.get('.text');
    console.log(stage.getChildren());

   for(i=0;i<clipartsImage.length;i++){ 
     counter++;
      (function() { 
          var image = clipartsImage[i];
          groups[counter] = image.parent.get;
          //console.log(image);
          var imageObj = new Image();
          imageObj.onload = function() {
              imageObj.src = image.attrs.src;
              console.log(image);
              image.setImage(imageObj);
              image.on('mouseover', function() {
                  document.body.style.cursor = 'pointer';
              });
              image.on('mouseout', function() {
                  document.body.style.cursor = 'default';
              });
              image.on('click', function(evt) {
                  this.children[0].children[3].show();
                  var shape = evt.targetNode;
                  this.moveToTop();
                  active = layers[shape.getId()];
                  objectId = shape.getId();
              });
              image.getLayer().draw;
          };
          imageObj.src = image.attrs.src;
      })();
      stage.draw();
    }
    stage.draw();
}

这是我的json文件，http://wklej.org/id/1105520/这是中期阶段。我会继续尝试，但如果有人遇到类似的问题并解决了它，我将感谢您的帮助：）

Answer 1

1）

你的JSON文件怎么了？base64字符串已经炸成了一百万行。。。

对于初学者来说，KineticJS.Layer不能将层作为子层。参考文献：

https://github.com/ericdrowell/KineticJS/wiki/Change-Log#455-2013年7月28日

new add（）验证。如果将无效的子项添加到父项，则会引发错误，例如，将一个层添加到另一个层时。

https://github.com/ericdrowell/KineticJS/wiki

未为分组层的子层激发KineticJS事件

在您的JSON文件中，有大量的层相互层叠，这肯定会导致问题。事实上，它看起来就像你有一个层，每个小组，你有！这是完全错误的KineticJS结构。

你应该研究一下如何以及何时使用层和组，这里有一些参考资料：

KineticJs 中的组和层之间有什么区别

https://github.com/ericdrowell/KineticJS/wiki（同样，KineticJS的数据结构层次结构）

2）

无需调用stage.draw()两次。

3）

JSON是数据格式，它只存储对象属性。这意味着它不会存储对附加到对象的事件的任何引用。

这意味着，当您加载JSON字符串时，必须将updateAnchor函数重新绑定到所有锚点。（类似于将click功能重新绑定到加载的图像）

在使用JSON文件创建阶段后，您必须在加载函数中执行类似操作：

var children = layer.getChildren(); //Use the layer that has all your groups with images/anchors. *REMEMBER you can't layers within layers!
for (var i=0; i<children.length; i++) {
  //If name starts with 'anchor'
  if (children.getName().indexOf('anchor') !== -1) {
    children[i].on('dragmove', function(evt) {
      updateAnchor(this);
      layer.draw();
    });
  }
}