Question

我是kineticJs的新手，并致力于在kinetic.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();
    }
}

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

1 个答案: