javascript - 图像元素 'clear' 背景颜色不起作用

Question

在 How to add an image to a window in Pebble.js? 的帮助下成功将图像添加到 Window 对象后，我尝试将图像添加到白色背景。该图像是 png，因此它是透明的，但即使设置了清晰的参数，背景也显示为黑色。有什么帮助吗？

编辑 这是代码:

// function that adds general elements to the window (top bar, icon, title, and text)
var addElementsToWindow = function(window, text) {
  // Top rectangle
  var rect = new UI.Rect({
    position: new Vector2(0, 0),
    size: new Vector2(144, 26),
    backgroundColor:'black'
  });

  // icon
  var icon = new UI.Image({
    position: new Vector2(100,20),
    size: new Vector2(25,26),
    backgroundColor: 'clear',
    borderColor: 'clear',
    image: 'images/menu_icon.png'
  });

  // Title text
  var title = new UI.Text({
    position: new Vector2(0, 30),
    size: new Vector2(144, 138),
    text:'Title',
    font:'gothic-24-bold',
    color:'black',
    textOverflow:'wrap',
    textAlign:'center',
    backgroundColor:'white'
  });

  // Loading text
  var subtext = new UI.Text({
    position: new Vector2(0, 60),
    size: new Vector2(144, 108),
    text:text,
    font:'gothic-24',
    color:'black',
    textOverflow:'wrap',
    textAlign:'center',
    backgroundColor:'white'
  });

  // Display the home screen
  window.add(rect);
  window.add(title);
  window.add(subtext);
  window.add(icon);
};

// Create the home screen
var home = new UI.Window();
addElementsToWindow(home, 'Loading...');
home.show();

Answer 1

为了使用 Pebble.js 实现透明度，需要合成属性。您将需要使用两组相同的图像。原因是 Pebble.js 使用与原生 SDK 相同的图像工具。 SDK不直接支持透明图像，因为它将所有PNG转换为1位黑白Pebble图像，丢弃透明度信息。

但是，除非绝对需要，否则我不建议使用此方法。性能损失大致相当于绘制常规图像四次。两张图像乘以二，并且启用合成使其加倍。最好制作具有人造透明度的单个图像 - 烘焙背景。

解决了这个问题，以下是您可以做到的事情。您可以制作一张图像 image_mask_white.png，其中最初的白色像素保持白色，其他所有内容均为黑色，而制作另一张图像 image_mask_black.png，其中最初的黑色像素变为白色，其他所有内容均为黑色。换句话说，您将拥有两个颜色 channel 的两个蒙版，使用白色表示不透明，使用黑色表示透明。使用这两个蒙版，您可以将它们合成在一起以形成具有透明度的单个图像。

var wind = new UI.Window();

var iconWhite = new UI.Image({
  position: new Vector2(100, 20),
  size: new Vector2(25, 26),
  compositing: 'or', // White pixels are shown, black pixels are clear.
  image: 'images/icon_mask_white.png'
});

var iconBlack = new UI.Image({
  position: new Vector2(100, 20),
  size: new Vector2(25, 26),
  compositing: 'clear', // The image’s white pixels are painted as black, and the rest are clear.
  image: 'images/icon_mask_white.png'
});

wind.add(iconWhite);
wind.add(iconBlack);

wind.show();

除了“或”和“清除”之外，还有“与”和“设置”，它们各自相反。您可以根据源图像使用其他组合创建合成图像。这只是一种可能的组合。 The official Pebble C SDK has more information on the compositing modes here.

背景颜色和边框颜色默认是透明的。正如您所注意到的，合成关闭的卵石阻碍了背景。合成应该显示背景颜色适当清晰，否则即将出现错误报告!