Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

gpui: Fix img element to render correct SVG color (#15488)

Browse source 
Release Notes:

- N/A


It should convert RGBA to BGRA.

> I added an example color svg, that was I make based on [Lucide grip
icon](https://lucide.dev/icons/grip).

## Before

<img width="692" alt="image"
src="https://github.com/user-attachments/assets/5eb03606-76ce-4049-b3ad-8d1084a4fa55">


## After

<img width="695" alt="image"
src="https://github.com/user-attachments/assets/650dd411-2095-4e92-b3fd-8e91c6954aa3">

Co-authored-by: Marshall Bowers <elliott.codes@gmail.com>
This commit is contained in:
Jason Lee 2024-09-18 01:50:36 +08:00 • committed by GitHub
parent 5cdca6d8dd
commit 345efa4e36
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 20 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

13
crates/gpui/examples/image/color.svg Normal file
View file

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 480 480" fill="none"
stroke="currentColor" stroke-width="40" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-grip">
<circle cx="240" cy="240" r="50" stroke="#44403c" />
<circle cx="100" cy="100" r="20" stroke="#65a30d" />
<circle cx="240" cy="100" r="30" stroke="#dc2626" />
<circle cx="380" cy="100" r="20" stroke="#d97706" />
<circle cx="380" cy="240" r="30" stroke="#06b6d4" />
<circle cx="100" cy="240" r="30" stroke="#3b82f6" />
<circle cx="240" cy="380" r="30" stroke="#7c3aed" />
<circle cx="380" cy="380" r="20" stroke="#c026d3" />
<circle cx="100" cy="380" r="20" stroke="#e11d48" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 741 B

2
crates/gpui/examples/image/image.rs
View file

@ -131,7 +131,7 @@ fn main() {
PathBuf::from_str("crates/gpui/examples/image/app-icon.png").unwrap(), PathBuf::from_str("crates/gpui/examples/image/app-icon.png").unwrap(),
), ),
remote_resource: "https://picsum.photos/512/512".into(), remote_resource: "https://picsum.photos/512/512".into(),
asset_resource: "image/app-icon.png".into(), asset_resource: "image/color.svg".into(),
}) })
}) })
.unwrap(); .unwrap();

7
crates/gpui/src/elements/img.rs
View file

@ -408,9 +408,14 @@ impl Asset for ImageAsset {
// TODO: Can we make svgs always rescale? // TODO: Can we make svgs always rescale?
svg_renderer.render_pixmap(&bytes, SvgSize::ScaleFactor(1.0))?; svg_renderer.render_pixmap(&bytes, SvgSize::ScaleFactor(1.0))?;
let buffer = let mut buffer =
ImageBuffer::from_raw(pixmap.width(), pixmap.height(), pixmap.take()).unwrap(); ImageBuffer::from_raw(pixmap.width(), pixmap.height(), pixmap.take()).unwrap();
// Convert from RGBA to BGRA.
for pixel in buffer.chunks_exact_mut(4) {
pixel.swap(0, 2);
}
RenderImage::new(SmallVec::from_elem(Frame::new(buffer), 1)) RenderImage::new(SmallVec::from_elem(Frame::new(buffer), 1))
}; };