さまざまな種類のグラフを表示するアプリを構築しています。ユーザーが行ったスコアによって配置された 2 つ以上の画像を表示する必要があります。問題とは関係ありません。そこで、json 経由で値を受け取ってグラフを描画する jQuery プラグインを作成しました。
プラグインは、最初にグラフの線を描画する関数を呼び出します (動作)。別の関数がグラフの背後にグリッドを描画します (これも動作します)。
ここで問題: 主要部分が値の配列をループし、返されてステージに追加されるレイヤーに Kinetic.image オブジェクトを追加します。:
$.each(this.data, function(key, value) {
$.each(value, function(secKey, secValue){
secValue.X = Math.floor((secValue.X - minX) * scaleX) + xOffset;
secValue.Y = Math.floor(yOffset + ((minY - secValue.Y) * scaleY));
coords.push(secValue);
});
});
$.each(coords, function(key, value){
var imageObj = new Image();
imageObj.src = value.image;
imageObj.onload = function() {
var image = new Kinetic.Image({
x: value.X,
y: value.Y,
image: imageObj,
width: 180,
height: 180
});
// add the shape to the layer
pictures.add(image);
};
});
return Array(pictures, popup);
最後に、レンダリングされたページには 4 つのキャンバス オブジェクトがあります。また、ステージを console.log() すると、グラフ、グリッド、写真、ポップアップのレイヤーがありますが、表示されていないのは画像です。画像のソースが利用可能です。これを数回確認しました。
問題がどこにあるのか、誰にもヒントがありますか?
前もって感謝します。
マティアス