Question

我正在使用kineticJS为我经常玩的电脑游戏制作地图（X3AP，fwiw）。

地图是从XML构建为一系列动态图像对象。在我的第一个原型构建中，我直接将扇区的各种图像添加到Universe图层（左侧，右侧，上下各个链接的黑框，扇区本身的正方形，名称的文本，a动态图像是否包含一个注意站）。所有扇区都被绘制到一个层（最后是一个比舞台大得多的层），并且该层被绘制到舞台上。

当我在该图层上实施拖动时，拖动是滞后的。

我的第一个想法是，不是将这些东西直接添加到表示宇宙地图的图层，将它们全部添加到局部变量图层，使用该图层的toImage，并在处理函数中，将生成的图像添加到我使用的图层为地图。图像返回空白（使用Firefox的firebug进行检查）。

我认为这可能是因为从未在任何时候将局部图层绘制到舞台上，所以没有什么可想象的，所以我尝试绘制整个图层，并在上运行一个toImage ，但是这次我得到的图像比我预期的要小（类似于http://jsfiddle.net/3tUj7/5/）。

我可以克隆地图图层并将其添加到第二个画布对象，该对象的属性设置为实际大小，以获取整个图像。这是合适的方式吗？

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

我最终使用了一个组，而不是一个图层，在0,0位置添加了组，宽度和高度为110.所有项目都添加到该组中，就像它被放置在需要的位置一样瓷砖位于正确的位置（所以介于0和大约110之间）。

toImage按预期在该组上工作，这使我可以避免生成与图层大小相同的图像。

toImage在未完全显示的图层上

1 个答案: