Merge a41e1f2a79
into 64b14ef848
This commit is contained in:
commit
2b58e5be36
3 changed files with 76 additions and 62 deletions
|
@ -75,64 +75,70 @@ impl Render for ImageShowcase {
|
||||||
fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
|
fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
|
||||||
div()
|
div()
|
||||||
.id("main")
|
.id("main")
|
||||||
|
.bg(gpui::white())
|
||||||
.overflow_y_scroll()
|
.overflow_y_scroll()
|
||||||
.p_5()
|
.p_5()
|
||||||
.size_full()
|
.size_full()
|
||||||
.flex()
|
|
||||||
.flex_col()
|
|
||||||
.justify_center()
|
|
||||||
.items_center()
|
|
||||||
.gap_8()
|
|
||||||
.bg(rgb(0xffffff))
|
|
||||||
.child(
|
|
||||||
div()
|
|
||||||
.flex()
|
|
||||||
.flex_row()
|
|
||||||
.justify_center()
|
|
||||||
.items_center()
|
|
||||||
.gap_8()
|
|
||||||
.child(ImageContainer::new(
|
|
||||||
"Image loaded from a local file",
|
|
||||||
self.local_resource.clone(),
|
|
||||||
))
|
|
||||||
.child(ImageContainer::new(
|
|
||||||
"Image loaded from a remote resource",
|
|
||||||
self.remote_resource.clone(),
|
|
||||||
))
|
|
||||||
.child(ImageContainer::new(
|
|
||||||
"Image loaded from an asset",
|
|
||||||
self.asset_resource.clone(),
|
|
||||||
)),
|
|
||||||
)
|
|
||||||
.child(
|
|
||||||
div()
|
|
||||||
.flex()
|
|
||||||
.flex_row()
|
|
||||||
.gap_8()
|
|
||||||
.child(
|
|
||||||
div()
|
|
||||||
.flex_col()
|
|
||||||
.child("Auto Width")
|
|
||||||
.child(img("https://picsum.photos/800/400").h(px(180.))),
|
|
||||||
)
|
|
||||||
.child(
|
|
||||||
div()
|
|
||||||
.flex_col()
|
|
||||||
.child("Auto Height")
|
|
||||||
.child(img("https://picsum.photos/800/400").w(px(180.))),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
.child(
|
.child(
|
||||||
div()
|
div()
|
||||||
.flex()
|
.flex()
|
||||||
.flex_col()
|
.flex_col()
|
||||||
.justify_center()
|
.justify_center()
|
||||||
.items_center()
|
.items_center()
|
||||||
.w_full()
|
.gap_8()
|
||||||
.border_1()
|
.child(img(
|
||||||
.border_color(rgb(0xC0C0C0))
|
"https://github.com/zed-industries/zed/actions/workflows/ci.yml/badge.svg",
|
||||||
.child("image with max width 100%")
|
))
|
||||||
.child(img("https://picsum.photos/800/400").max_w_full()),
|
.child(
|
||||||
|
div()
|
||||||
|
.flex()
|
||||||
|
.flex_row()
|
||||||
|
.justify_center()
|
||||||
|
.items_center()
|
||||||
|
.gap_8()
|
||||||
|
.child(ImageContainer::new(
|
||||||
|
"Image loaded from a local file",
|
||||||
|
self.local_resource.clone(),
|
||||||
|
))
|
||||||
|
.child(ImageContainer::new(
|
||||||
|
"Image loaded from a remote resource",
|
||||||
|
self.remote_resource.clone(),
|
||||||
|
))
|
||||||
|
.child(ImageContainer::new(
|
||||||
|
"Image loaded from an asset",
|
||||||
|
self.asset_resource.clone(),
|
||||||
|
)),
|
||||||
|
)
|
||||||
|
.child(
|
||||||
|
div()
|
||||||
|
.flex()
|
||||||
|
.flex_row()
|
||||||
|
.gap_8()
|
||||||
|
.child(
|
||||||
|
div()
|
||||||
|
.flex_col()
|
||||||
|
.child("Auto Width")
|
||||||
|
.child(img("https://picsum.photos/800/400").h(px(180.))),
|
||||||
|
)
|
||||||
|
.child(
|
||||||
|
div()
|
||||||
|
.flex_col()
|
||||||
|
.child("Auto Height")
|
||||||
|
.child(img("https://picsum.photos/800/400").w(px(180.))),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
.child(
|
||||||
|
div()
|
||||||
|
.flex()
|
||||||
|
.flex_col()
|
||||||
|
.justify_center()
|
||||||
|
.items_center()
|
||||||
|
.w_full()
|
||||||
|
.border_1()
|
||||||
|
.border_color(rgb(0xC0C0C0))
|
||||||
|
.child("image with max width 100%")
|
||||||
|
.child(img("https://picsum.photos/800/400").max_w_full()),
|
||||||
|
),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
use crate::{DevicePixels, Result, SharedString, Size, size};
|
use crate::{DevicePixels, Pixels, Result, SharedString, Size, size};
|
||||||
use smallvec::SmallVec;
|
use smallvec::SmallVec;
|
||||||
|
|
||||||
use image::{Delay, Frame};
|
use image::{Delay, Frame};
|
||||||
|
@ -42,6 +42,8 @@ pub(crate) struct RenderImageParams {
|
||||||
pub struct RenderImage {
|
pub struct RenderImage {
|
||||||
/// The ID associated with this image
|
/// The ID associated with this image
|
||||||
pub id: ImageId,
|
pub id: ImageId,
|
||||||
|
/// The scale factor of this image on render.
|
||||||
|
pub(crate) scale_factor: f32,
|
||||||
data: SmallVec<[Frame; 1]>,
|
data: SmallVec<[Frame; 1]>,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -60,6 +62,7 @@ impl RenderImage {
|
||||||
|
|
||||||
Self {
|
Self {
|
||||||
id: ImageId(NEXT_ID.fetch_add(1, SeqCst)),
|
id: ImageId(NEXT_ID.fetch_add(1, SeqCst)),
|
||||||
|
scale_factor: 1.0,
|
||||||
data: data.into(),
|
data: data.into(),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -77,6 +80,12 @@ impl RenderImage {
|
||||||
size(width.into(), height.into())
|
size(width.into(), height.into())
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// Get the size of this image, in pixels for display, adjusted for the scale factor.
|
||||||
|
pub(crate) fn render_size(&self, frame_index: usize) -> Size<Pixels> {
|
||||||
|
self.size(frame_index)
|
||||||
|
.map(|v| (v.0 as f32 / self.scale_factor).into())
|
||||||
|
}
|
||||||
|
|
||||||
/// Get the delay of this frame from the previous
|
/// Get the delay of this frame from the previous
|
||||||
pub fn delay(&self, frame_index: usize) -> Delay {
|
pub fn delay(&self, frame_index: usize) -> Delay {
|
||||||
self.data[frame_index].delay()
|
self.data[frame_index].delay()
|
||||||
|
|
|
@ -332,20 +332,18 @@ impl Element for Img {
|
||||||
state.started_loading = None;
|
state.started_loading = None;
|
||||||
}
|
}
|
||||||
|
|
||||||
let image_size = data.size(frame_index);
|
let image_size = data.render_size(frame_index);
|
||||||
style.aspect_ratio =
|
style.aspect_ratio = Some(image_size.width / image_size.height);
|
||||||
Some(image_size.width.0 as f32 / image_size.height.0 as f32);
|
|
||||||
|
|
||||||
if let Length::Auto = style.size.width {
|
if let Length::Auto = style.size.width {
|
||||||
style.size.width = match style.size.height {
|
style.size.width = match style.size.height {
|
||||||
Length::Definite(DefiniteLength::Absolute(
|
Length::Definite(DefiniteLength::Absolute(
|
||||||
AbsoluteLength::Pixels(height),
|
AbsoluteLength::Pixels(height),
|
||||||
)) => Length::Definite(
|
)) => Length::Definite(
|
||||||
px(image_size.width.0 as f32 * height.0
|
px(image_size.width.0 * height.0 / image_size.height.0)
|
||||||
/ image_size.height.0 as f32)
|
.into(),
|
||||||
.into(),
|
|
||||||
),
|
),
|
||||||
_ => Length::Definite(px(image_size.width.0 as f32).into()),
|
_ => Length::Definite(image_size.width.into()),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -354,11 +352,10 @@ impl Element for Img {
|
||||||
Length::Definite(DefiniteLength::Absolute(
|
Length::Definite(DefiniteLength::Absolute(
|
||||||
AbsoluteLength::Pixels(width),
|
AbsoluteLength::Pixels(width),
|
||||||
)) => Length::Definite(
|
)) => Length::Definite(
|
||||||
px(image_size.height.0 as f32 * width.0
|
px(image_size.height.0 * width.0 / image_size.width.0)
|
||||||
/ image_size.width.0 as f32)
|
.into(),
|
||||||
.into(),
|
|
||||||
),
|
),
|
||||||
_ => Length::Definite(px(image_size.height.0 as f32).into()),
|
_ => Length::Definite(image_size.height.into()),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -701,7 +698,9 @@ impl Asset for ImageAssetLoader {
|
||||||
swap_rgba_pa_to_bgra(pixel);
|
swap_rgba_pa_to_bgra(pixel);
|
||||||
}
|
}
|
||||||
|
|
||||||
RenderImage::new(SmallVec::from_elem(Frame::new(buffer), 1))
|
let mut image = RenderImage::new(SmallVec::from_elem(Frame::new(buffer), 1));
|
||||||
|
image.scale_factor = SMOOTH_SVG_SCALE_FACTOR;
|
||||||
|
image
|
||||||
};
|
};
|
||||||
|
|
||||||
Ok(Arc::new(data))
|
Ok(Arc::new(data))
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue