mirror of
https://github.com/google/pebble.git
synced 2025-03-26 13:09:06 +00:00
108 lines
3 KiB
Markdown
108 lines
3 KiB
Markdown
|
---
|
|||
|
|
# Copyright 2025 Google LLC
|
|||
|
|
#
|
|||
|
|
# Licensed under the Apache License, Version 2.0 (the "License");
|
|||
|
|
# you may not use this file except in compliance with the License.
|
|||
|
|
# You may obtain a copy of the License at
|
|||
|
|
#
|
|||
|
|
# http://www.apache.org/licenses/LICENSE-2.0
|
|||
|
|
#
|
|||
|
|
# Unless required by applicable law or agreed to in writing, software
|
|||
|
|
# distributed under the License is distributed on an "AS IS" BASIS,
|
|||
|
|
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
|
|
# See the License for the specific language governing permissions and
|
|||
|
|
# limitations under the License.
|
|||
|
|
|
|||
|
|
title: Tips and Tricks - Transparent Images
|
|||
|
|
author: chrislewis
|
|||
|
|
tags:
|
|||
|
|
- Beautiful Code
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
Ever wondered how to draw transparent images in a Pebble app? This post will
|
|||
|
|
walk you through the process.
|
|||
|
|
|
|||
|
|
In this post, we'll be using a sample image with a transparency component, shown
|
|||
|
|
below:
|
|||
|
|
|
|||
|
|
<a href="{{ site.asset_path }}/images/blog/tips-transparency-globe.png" download>
|
|||
|
|
<img src="{{ site.asset_path }}/images/blog/tips-transparency-globe.png">
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
When adding your project resource, ensure you set its ‘type’ correctly. On
|
|||
|
|
CloudPebble, this is done when uploading the resource and choosing the 'PNG'
|
|||
|
|
type. In the SDK, this is done with the `png` `type` in the project's
|
|||
|
|
`appinfo.json`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
"media": [
|
|||
|
|
{
|
|||
|
|
"type": "png",
|
|||
|
|
"name": "GLOBE",
|
|||
|
|
"file": "globe.png"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
This will create a resource ID to use in code:
|
|||
|
|
|
|||
|
|
```text
|
|||
|
|
RESOURCE_ID_GLOBE
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Simply create a ``GBitmap`` with this resource and draw the image with
|
|||
|
|
``GCompOpSet`` as the compositing mode:
|
|||
|
|
|
|||
|
|
```c
|
|||
|
|
static GBitmap *s_bitmap;
|
|||
|
|
static Layer *s_canvas_layer;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```c
|
|||
|
|
static void window_load(Window *window) {
|
|||
|
|
Layer *window_layer = window_get_root_layer(window);
|
|||
|
|
|
|||
|
|
// Create GBitmap
|
|||
|
|
s_bitmap = gbitmap_create_with_resource(RESOURCE_ID_GLOBE);
|
|||
|
|
|
|||
|
|
// Create canvas Layer
|
|||
|
|
s_canvas_layer = layer_create(layer_get_bounds(window_layer));
|
|||
|
|
layer_set_update_proc(s_canvas_layer, layer_update_proc);
|
|||
|
|
layer_add_child(window_layer, s_canvas_layer);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```c
|
|||
|
|
static void layer_update_proc(Layer *layer, GContext *ctx) {
|
|||
|
|
// Draw the image with the correct compositing mode
|
|||
|
|
graphics_context_set_compositing_mode(ctx, GCompOpSet);
|
|||
|
|
graphics_draw_bitmap_in_rect(ctx, s_bitmap, gbitmap_get_bounds(s_bitmap));
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
When drawing on a ``TextLayer`` underneath `s_canvas_layer`, the result looks
|
|||
|
|
like this:
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
See a full demo of this technique on the
|
|||
|
|
[pebble-examples GitHub repo]({{site.links.examples_org}}/feature-image-transparent).
|
|||
|
|
|
|||
|
|
Job done! Any transparent pixels in the original image will be drawn as clear,
|
|||
|
|
leaving the color beneath unaffected.
|
|||
|
|
|
|||
|
|
Read the [Image Resources](/guides/app-resources/) guide to learn more
|
|||
|
|
about transparent PNGs.
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Conclusion
|
|||
|
|
|
|||
|
|
So there you have it. Using these examples you can easily implement transparency
|
|||
|
|
on all Pebble platforms. To learn more, read the ``GCompOp`` documentation or
|
|||
|
|
the
|
|||
|
|
[`pebble-examples/feature-image-transparent`]({{site.links.examples_org}}/feature-image-transparent)
|
|||
|
|
SDK example.
|