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

【问题标题】：KineticJs Adds multiple canvas instead of a single canvas with multiple layersKineticJs 添加多个画布而不是具有多个图层的单个画布
【发布时间】：2014-04-07 01:06:10
【问题描述】：

我是 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);
}}

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

【问题讨论】：

标签： javascript html image canvas kineticjs

【解决方案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();
    }
}

【讨论】：