1

json ファイルから単純なステージをロードしようとしましたが、画像をロードしましたが、すべてが 1 つのレイヤーにあり、画像がグループ化されていないため、サイズ変更が機能しません。レイヤーとグループを含むすべての要素をロードする方法がわかりません。

これはロードする私の関数です（今のところ画像のみです）

   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/これは中間段階です。私は努力を続けますが、誰かが同様の問題を抱えて解決した場合は、あなたの助けに感謝します:)

4

1 に答える 1

0

1)

JSON ファイルはどうなっていますか? base64 文字列が 100 万行に膨れ上がりました...

まず、KineticJS.Layerはレイヤーを子として持つことはできません。参考文献:

https://github.com/ericdrowell/KineticJS/wiki/Change-Log#455-july-28-2013

新しい 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 ファイルを使用してステージを作成した後、load 関数内で次のような操作を行う必要があります。

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();
    });
  }
}
于 2013-08-13T19:01:22.880 に答える