Skip to content

Commit

Permalink
Merge branch 'main' of github.com:khonsulabs/gooey
Browse files Browse the repository at this point in the history
  • Loading branch information
ecton committed Oct 9, 2024
2 parents a129e64 + e121cf8 commit 7da5be6
Showing 1 changed file with 53 additions and 0 deletions.
53 changes: 53 additions & 0 deletions guide/src/widgets/controls/image.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,57 @@
The [`Image`][image] widget displays an image/texture with configurable scaling
options.

## ImageCornerRadius

Use [`ImageCornerRadius`][ImageCornerRadius] component to set the corner/border radius of an image. `CornerRadius` is not used.

```rs
image
.with_dynamic(&ImageCornerRadius, CornerRadius) // CornerRadius is a Dynamic(Lp) here
.with(&ImageCornerRadius, Lp::points(6)) // or, a static corner radius
```

## Dynamic textures

Use a [`Dynamic`][Dynamic]`(`[`AnyTexture`][AnyTexture]`)`.

You can default to a empty texture like so:

```rs
let dynamic_texture = Dynamic::new(
AnyTexture::Lazy(
LazyTexture::from_image(
image::DynamicImage::ImageRgba8(
image::ImageBuffer::new(1, 1)
),
cushy::kludgine::wgpu::FilterMode::Linear
)
)
);
let widget = Image::new(dynamic_texture); // Creates image widget with an empty texture, that can later be changed
```

To load an image from bytes, use the [`image`][image-crate] crate and then pass it to LazyTexture:

```rs
let image = image::load_from_memory(&bytes).unwrap();
let texture = LazyTexture::from_image(
image,
cushy::kludgine::wgpu::FilterMode::Linear
);
let texture = AnyTexture::Lazy(texture);
dynamic_texture.set(texture);
```

## FilterMode

[`FilterMode`][FilterMode] enum specifies the sampler to be used for when an image is scaled.
Linear smooths the version, making it blurry at the extremes but with less grain.
Nearest makes the result more pixelated with hard edges.

[image]: <{{ docs }}/widgets/image/struct.Image.html>
[image-crate]: <https://docs.rs/image/latest/image/>
[ImageCornerRadius]: <{{ docs }}/widgets/image/struct.ImageCornerRadius.html>
[FilterMode]: <https://docs.rs/wgpu-types/22.0.0/wgpu_types/enum.FilterMode.html>
[Dynamic]: </about/reactive.html#what-is-a-dynamict>
[AnyTexture]: <https://docs.rs/kludgine/latest/kludgine/enum.AnyTexture.html>

0 comments on commit 7da5be6

Please sign in to comment.