Элемент изображения «clear» backgroundColor не работает

Question

После успешного добавления изображения в объект Window с помощью How to add an image to a window in Pebble.js? я попытался добавить изображение на белый фон. Изображение представляет собой png, поэтому оно прозрачно, но фон выглядит черным даже с четким набором параметров. Любая помощь по этому поводу?

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

Из documentation

"четкие" белые пиксели этого изображения, окрашенных в черный цвет, а остальные понятны.

Попробуйте "обычный".

EDIT: Возможно также, что фон вашего изображения белый, не прозрачный.

Answer 2

Для обеспечения прозрачности с помощью Pebble.js требуется свойство компоновки. Вам нужно будет использовать два набора одинаковых изображений. Причина в том, что 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(); 

В отличие от «или» и «ясного», существуют «и» и «установлены», которые являются соответствующими противоположностями. Вы можете создать составное изображение с другими комбинациями в зависимости от исходных изображений. Это всего лишь одна возможная комбинация. The official Pebble C SDK has more information on the compositing modes here.

Цвет фона и цвет рамки по умолчанию чистые. Пелбл с композицией выключает фон, как вы заметили. Композиция должна показать, что цвет фона правильно понятен, иначе отчет об ошибке неминуем!