0

そのため、KineticJS.Image チュートリアルを実行しようとしましたが、問題が発生しました。

これは機能します:

$(document).ready( function() { 
  var icon = new Image();    
  icon.onload = function() { 
    var stage = new Kinetic.Stage({ 
      container: 'canvas',      
      width: 730,            
      height: 700,           
    });
    var layer = new Kinetic.Layer();

    var im = new Kinetic.Image({    
      x: -14,
      y: -13,
      image: icon,
      width: 30,
      height: 30
    });
    layer.add(im);        
    stage.add(layer);        
  };                         
  icon.src = '#{asset_path "icons.png"}';
});

これは、チュートリアル コードに非常に近いものですが、次のことは行いません。

$(document).ready( function() { 
  var stage = new Kinetic.Stage({
    container: 'targetCanvas',
    width: 730,
    height: 700,
  });
  var layer = new Kinetic.Layer();
  var icon = new Image();    
  icon.onload = function() { 
    var im = new Kinetic.Image({
      image: icon,
      width: 30,
      height: 30,
    });
    layer.add(im);        
    stage.add(layer);        
  };                         
  icon.src = '#{asset_path "designer_icons.png"}';
});

それはスローします:

Uncaught TypeError: Object #<Object> has no method '_addId' kinetic.js:28
  Kinetic.Container.add
  Kinetic.Stage.add
  icon.onload

これはプロジェクト (Rails w/Backbone、Require、Bootstrap、および Kinetic) の深刻なハック作業であるため、私の環境では何かがめちゃくちゃになる可能性があり、JavaScript やさまざまなライブラリを本当に知らないので、私は暗闇の中で手探りしています。

これを引き起こしている原因とそれを修正する方法はありますか?

4

1 に答える 1