Question

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

EDIT 这是代码：

// 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位黑白卵石图像，丢弃透明度信息。

但是，除非绝对必要，否则我建议不要使用此方法。性能损失大致等于绘制四次常规图像。两个图像的时间二，并启用合成两倍。最好使用虚假透明度制作单个图像 - 背景烘焙。

有了这个，就是你如何做到这一点。您可以制作一个图像，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();

除了＆＃39;或＆＃39;并且＆＃39;清除＆＃39;有＆＃39;和＆＃39;和＆＃39;设置＆＃39;这是各自的对立面。您可以根据源图像创建包含其他组合的合成图像。这只是一种可能的组合。 The official Pebble C SDK has more information on the compositing modes here.

默认情况下，背景颜色和边框颜色是清晰的。正如你所注意到的那样，合成的卵石遮挡了背景。合成应该揭示背景颜色是否正确清晰，否则即将发布错误报告！

Answer 2

来自documentation

“清除”图像的白色像素被涂成黑色，其余部分被涂成黑色很清楚。

尝试“正常”。

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

图像元素＆＃39;清除＆＃39; backgroundColor不起作用

2 个答案: