Question

I am building an app which should show different types of graphs. One should show two or more images positioned by the scores the user did. Okay that has nothing to do with the problem. So I wrote a jQuery plugin which receives values via json to draw the graphs.

The plugin first calls a function which draws the Lines of the graph (working) another function draws the grid behind the graph (also working).

Now the problem: the main part loops over the array of values and adds Kinetic.image objects to a layer wich is returned und added to the stage.:

$.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);

At the end the the rendered page has 4 canvas objects. And also when I console.log() the stage there are the layers for graph, grid, pictures and popup in it, but whats not shown are the images. The sources of the images are available. Checked this several times.

Does anyone have a hint where the problem could be.?

Thanks in advance.

Matthias

Answer 1

have you confirmed that imageObj.onload is being executed? It’s standard practice to set the source of the imageObj after defining the imageObj onload function due to browser caching.

Next, you’ll also want to be sure to redraw the layer whenever the images have been loaded with layer.draw(); Recall that KineticJS layers don’t auto redraw whenever things change for performance reasons