javascript - 组内图像不显示

Question

我在 Kineticjs 中有一个图层组，其中有 4 个圆圈作为调整图像大小的 anchor 。单击按钮时创建图像、组和 anchor 。问题是当图像和圆圈创建时，圆圈看起来没问题，直到点击四个圆圈之间的区域，图像才会显示。

  var userGroup = new Kinetic.Group({
    x: 0,
    y: 0,
    width: width,
    height: height,
    draggable: true
  });

  var layer = new Kinetic.Layer();

  var imageObj = new Image();

  var userImg = new Kinetic.Image({
    id : 'userimg',
    x: 0,
    y: 0,
    image: imageObj,
    width: width,
    height: height,
    name: 'image'
  });

  userGroup.add(userImg);
  layer.add(userGroup);
  stage.add(layer);

  addAnchor(userGroup, 0, 0, 'topLeft');
  addAnchor(userGroup, width, 0, 'topRight');
  addAnchor(userGroup, width, height, 'bottomRight');
  addAnchor(userGroup, 0, height, 'bottomLeft');
  layer.draw();

  userGroup.on('dragstart', function() {
    layer.moveToTop();
    layer.draw();
  });    

  layer.draw();
  imageObj.src = uploadimg; // uploadimg = image url in my root web folder /images
  layer.draw();
  stage.draw();
});  

Answer 1

会发生什么情况是您的图像尚未加载。您将其分配给 Kinetic.image 并在图像加载之前更新图层。因此需要在图片的onload函数中添加回调。

你应该这样做:

imageObj = new Image();
imageObj.onload = function() {
    var userImg = new Kinetic.Image({
        id : 'userimg',
        x: 0,
        y: 0,
        image: imageObj,
        width: width,
        height: height,
        name: 'image'
    });
    userGroup.add(userImg);
    layer.draw();
};
imageObj.src = uploadimg;

一个好的做法是在您甚至在 Canvas 上绘制之前加载 Canvas 所需的所有图像。此片段来自html5canvastutorials :

function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    for(var src in sources) {
        numImages++;
    }
    for(var src in sources) {
        images[src] = new Image();
        images[src].onload = function() {
            if(++loadedImages >= numImages) {
                callback(images);
            }
        };
        images[src].src = sources[src];
    }
}

用法:

var sources = {
    darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
    yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
};
loadImages(sources, function(images) {
    //all images are loaded in this callback function
});