Question

I am using kineticJS to build a map for a computer game that I frequently play (X3AP, fwiw).

The map is being built from XML as a series of kinetic image objects. In my first prototype build, I directly added the various images for a sector to the universe layer (that is a black box for each links left, right, up and down, the square for the sector itself, the text for the name, a kinetic image for whether or not it contains a station of note). All of the sectors are drawn to a layer (ending up with a layer that is much bigger than the stage) and that layer is drawn to the stage.

When I implemented dragging on that layer, the drag is laggy.

My first thought was instead of adding these things directly to the layer representing the universe map, add them all to a local variable layer, use that layer’s toImage and in the handling function, add the resulting image to the layer that I use for the map. The image was returning blank (checked with Firefox’s firebug).

I figured this might be down to never having drawn the local layer to the stage at any point, so there’s nothing to be imagified so I tried drawing the entire layer as I was and running a toImage on that, but this time I got a smaller image than what I was expecting (something akin to this http://jsfiddle.net/3tUj7/5/).

I can clone the map layer and add it to a second canvas object which has its properties set to the real size, to get the entire image. Is this the appropriate way?

var layer;
$(
    function()
    {
        var stage = new Kinetic.Stage({
            width:100,
            height:100,
            container:'canvas'
        });
        layer = new Kinetic.Layer({
            width:200,
            height:200,
            draggable:true
        });
        stage.add(layer);

        layer.add(
            new Kinetic.Rect({
                fill:'black',
                x:0,
                y:0,
                width:200,
                height:200
            })
        );

        for(var i = 0; i < 100; i++)
        {
            var x = parseInt(Math.random()*190);
            var y = parseInt(Math.random()*190);
            layer.add(
                new Kinetic.Rect({
                    x:x,
                    y:y,
                    width:10,
                    height:10,
                    fill:'red',
                    stroke:'black',
                    strokeWidth:1
                })
            );
        }
        layer.draw();
        // only returns the image of the *shown* part of the layer
        layer.toImage({
            callback:function(img)
            {
                $('#canvasImg').attr('src', img.src);
            }
        });
    }
);

Answer 1

I ended up using a group, rather than a layer, adding the group at position 0,0 and a width and height of 110. All items were added to that group as though it were placed where it needed to be for the tile to be in the correct place (so between 0 and approximately 110).

The toImage worked on that group as expected allowing me to avoid the generation of an image the size of the layer.