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（）重新显示它）。或者在参数中将visible设置为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库中的众多设置器之一）。

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

kineticjs图像背景不透明

2 个答案: