KineticJs添加多个画布，而不是具有多个图层的单个画布

Question

我是dynamicJ的新手，正在努力在dynamic.stage上添加多个图像。

最初，我使用以下代码成功创建了画布：

var stage = new Kinetic.Stage({
    container: 'content',
    width: x,
    height: y
    });

//declare layer
var layer = new Kinetic.Layer();

//declare image
var baseImage = new Kinetic.Image({
  image: $('#img')[0];
});

layer.add(baseImage);
stage.add(layer);

但是我必须不时地将越来越多的图像添加到画布上，所以我做了一个函数，可以在画布上添加另一个图像。 我的代码是这样的..

function addImageLayer(){
//declare layer
var layer2 = new Kinetic.Layer();

//declare image
var image2 = new Image();
image2.src = "../resources/images/frames/newYearBunny.png";

image2.onload = function(){
    var KineticImage2 = new Kinetic.Image({
        x: 200,
        y: 50,
        image: image2,
        draggable: true
    });


    layer2.add(KineticImage2);
    stage.add(layer2);
}}

不幸的是，我已经在现有的基础上添加了一个新的东西，而我必须添加一个图层。 谢谢

Answer 1

您可以将新图像添加到现有layer

（确保在将新对象添加到图层后显示layer.draw（）以便显示它们）

function addImageLayer(){
    //declare image
    var image2 = new Image();
    image2.src = "../resources/images/frames/newYearBunny.png";
    image2.onload = function(){
        var KineticImage2 = new Kinetic.Image({
            x: 200,
            y: 50,
            image: image2,
            draggable: true
        });
        layer.add(KineticImage2);
        layer.draw();
    }
}