0

別のソースから動的に画像を追加できるキネティック キャンバスを作成しようとしています。背景にグリッドが必要だったので、キネティック v3.8.2 の kinetic.rect を使用しました。画像はキネティック v.3.6.0 からドラッグ可能である必要がありますが、v3.8.2 をアクティブにしているときにドラッグ可能に設定すると壊れます。FireBug によると、「config is undefined」です。「img.kinetic.draggable はメソッドではありません」と FireBug は言います。

これに対する修正はありますか？

4

1 に答える 1

0

小さな例を投稿できますか？Kinetic API に変更が加えられました。3.8.2 でドラッグ可能な画像を次に示します。

<!DOCTYPE html>
<html>
  <head>    

    <script type='text/javascript' src='js/kinetic/kinetic-v3.8.2.js'></script>    
    <script type='text/javascript'>        

      window.onload = function () {

          var stage = new Kinetic.Stage('container', 400, 300);
          var layer = new Kinetic.Layer({
              name: 'someLayer'
          });

          var logo = new Image();        
          logo.onload = function() {

              var myImage = new Kinetic.Image({
                    x: stage.width / 2 - (logo.width / 2)
                  , y: stage.height - logo.height - 5
                  , image: logo
                  , width: logo.width
                  , height: logo.height
              });          

              myImage.draggable(true)
              layer.add(myImage);
              layer.draw();
          }
          logo.src = "\./resources/images/ccs_logo.png";        

          stage.add(layer)        
      }

    </script>

  </head>

  <body onmousedown="return false;" bgcolor=#000000>        
    <div id="container">
    </div>
  </body>

</html>

最も注目すべきは、クラスのインスタンス化のために構成が最近導入されたことです。キネティック レクタングルは、次のように定義されていました。

var rect = new Kinetic.Rectangle(function () {

    //do drawing stuff here
});

しかし、今では config (オブジェクト リテラル) で定義されています。

var rect = new Kinetic.Rectangle({
    x: 0,
    y: 0,
    height: 20,
    width: 20
});

docsで例を見ることができます。更新されたKineticJS チュートリアルもチェックしてください。

于 2012-03-09T13:35:57.730 に答える