0

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

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

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

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

我想这可能是因为在任何时候都没有将本地图层绘制到舞台上，所以没有什么可以想象的，所以我尝试按原样绘制整个图层并在其上运行 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);
            }
        });
    }
);
4

1 回答 1

1

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

toImage 按预期在该组上工作，使我能够避免生成图层大小的图像。

于 2012-12-17T05:10:52.357 回答