2

さまざまな種類のグラフを表示するアプリを構築しています。ユーザーが行ったスコアによって配置された 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() すると、グラフ、グリッド、写真、ポップアップのレイヤーがありますが、表示されていないのは画像です。画像のソースが利用可能です。これを数回確認しました。

問題がどこにあるのか、誰にもヒントがありますか?

前もって感謝します。

マティアス

4

1 に答える 1

7

imageObj.onload が実行されていることを確認しましたか? ブラウザのキャッシングにより、imageObj onload 関数を定義した後に imageObj のソースを設定するのが標準的な方法です。

次に、画像が layer.draw(); で読み込まれるたびにレイヤーを再描画する必要があります。KineticJS レイヤーは、パフォーマンス上の理由で状況が変わるたびに自動再描画されないことを思い出してください。

于 2012-09-26T01:00:47.013 に答える