0

Pebble.jsでウィンドウに画像を追加する方法の助けを借りて、ウィンドウオブジェクトに画像を正常に追加できた後? 、白い背景に画像を追加してみました。画像は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();
4

2 に答える 2

2

Pebble.js で透過性を実現するには、compositing プロパティが必要です。同じ画像を 2 セット使用する必要があります。その理由は、Pebble.js がネイティブ SDK と同じ画像ツールを使用しているためです。SDK は、すべての PNG を 1 ビットの白黒の Pebble 画像に変換し、透明度情報を破棄するため、透明な画像を直接サポートしていません。

ただし、どうしても必要な場合を除き、この方法の使用はお勧めしません。パフォーマンスの低下は、通常の画像を 4 回描画するのとほぼ同じです。2 つの画像で 2 倍になり、合成を有効にすると 2 倍になります。背景が焼き付けられた偽の透明度を持つ単一の画像を作成することをお勧めします。

それが邪魔にならないように、これがあなたがそれを行う方法です。元の白いピクセルが白のまま残りはすべて黒である image_mask_white.png と、元の黒のピクセルが白になり他のすべてが黒になる別のイメージ image_mask_black.png を作成できます。つまり、白を使用して不透明を表し、黒を使用して透明を表す 2 つのカラー チャネルの 2 つのマスクを作成します。これら 2 つのマスクを使用して、それらを合成して、透明度のある 1 つの画像を形成できます。

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」があります。ソース画像に応じて、他の組み合わせで合成画像を作成できます。これは可能な組み合わせの 1 つにすぎません。公式の Pebble C SDK には、合成モードに関する詳細情報がここにあります。

デフォルトでは、背景色と境界線の色はクリアです。お気づきのように、合成をオフにした小石が背景を遮っています。合成すると、背景色が適切にクリアされていることが明らかになるはずです。それ以外の場合は、バグ レポートが差し迫っています!

于 2014-11-24T09:14:24.643 に答える
0

ドキュメントから

"clear" 画像の白いピクセルは黒く塗りつぶされ、残りは透明になります。

「普通」にしてみてください。

編集: 画像の背景が透明ではなく白である可能性もあります。

于 2014-11-18T19:20:53.887 に答える