kinetic-v3.8.2.js 破坏了 kinetic-v3.6.0.js 和 kinetic-image-plugin-v1.0.1.js，如何解决？答案

【问题标题】：kinetic-v3.8.2.js breaks kinetic-v3.6.0.js and kinetic-image-plugin-v1.0.1.js, how to fix?kinetic-v3.8.2.js 破坏了 kinetic-v3.6.0.js 和 kinetic-image-plugin-v1.0.1.js，如何解决？
【发布时间】：2012-03-09 21:35:57
【问题描述】：

我正在尝试制作一个动态画布，我可以在其中动态添加来自另一个来源的图片，并且我希望在背景中有一个网格，因此我使用了 kinetic v3.8.2 中的 kinetic.rect。图像需要是可拖动的，从动力学 v.3.6.0 开始，但如果我在激活 v3.8.2 时设置可拖动，它会中断。根据 FireBug，“配置未定义”。 “img.kinetic.draggable 不是一种方法”，FireBug 说。

有解决办法吗？

【问题讨论】：

标签： javascript canvas kineticjs

【解决方案1】：

你能发布一个小例子吗？ 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
});

但现在它是用配置（对象字面量）定义的：

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

您可以在docs 中查看示例；另请查看更新后的KineticJS Tutorials。

【讨论】：