KineticJS图像背景不透明

Question

我有一些图像.png具有透明背景，但是，当它们被添加到舞台时，它们具有白色背景。我在这里错过了一个技巧吗？

每个图像的添加方式如下：

var layer = new Kinetic.Layer();
var book = new Image();
book.onload=function () {
bookImg = new Kinetic.Image ({ x: 885, y: 780, offset: [85.5, 106], image:book, name:book, opacity: 0, /*scale:{x:0.5, y:0.5}*/ });
layer.add(bookImg);
stage.add(layer);
}
book.src = "images/book.png";

是图层本身是创建白色背景的原因吗？有点困惑！

Answer 1

难道你必须将背景设置为透明吗？不仅是图片本身，还有包含图像的图像对象。也许也是这一层。

Answer 2

您不需要在 Kinetic.Image（） 对象上设置不透明度。如果您希望它最初或放置后不可见，只需使用 hide（）（随后 show（） 重新显示它）。或者在参数中将可见设置为 false。在舞台上放置图像所需的最低要求如下所示：

var image = new Kinetic.Image({
    x: 0,
    y: 0,
    image: imageObj,
    width: 300,
    height: 120
  });
layer.add(image);
layer.draw();

这假设您的图层已被添加到 Kinetic.Stage（） 并且图像已加载（ imageObj.onload = function（）{} ）。包括名称很好，偏移量和不透明度（甚至比例）是参数的有效键/值对，但在创建图像时并不是真正必需的。这些始终可以在将图像添加到图层后进行设置（使用 KineticJS 库中的众多资源库之一）。

我会尝试使用极简主义的方法查看图像是否首先按预期显示，然后从那里开始。