そのため、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 やさまざまなライブラリを本当に知らないので、私は暗闇の中で手探りしています。
これを引き起こしている原因とそれを修正する方法はありますか?