0

在如何在 Pebble.js 中向窗口添加图像？，我尝试将图像添加到白色背景。图像是 png，因此它是透明的，但即使设置了 clear 参数，背景也会显示为黑色。对此有什么帮助吗？

编辑这是代码：

// 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();
4

2 回答 2

2

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

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

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

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();

除了“or”和“clear”之外，还有“and”和“set”，它们是各自对立的。您可以根据源图像创建具有其他组合的合成图像。这只是一种可能的组合。官方 Pebble C SDK 在此处提供了有关合成模式的更多信息。

背景颜色和边框颜色默认是清晰的。正如您所注意到的，关闭合成的 Pebble 会遮挡背景。合成应该显示背景颜色正确清晰，否则即将出现错误报告！

于 2014-11-24T09:14:24.643 回答
0

从文档

"clear" 图像的白色像素被涂成黑色，其余的都是清晰的。

试试“正常”。

编辑：图像的背景也可能是白色不透明。

于 2014-11-18T19:20:53.887 回答