I would like to poke at pixels in a bitmap and dra...

# compose-desktop

[Draget]

I would like to poke at pixels in a bitmap and draw it in compose. I have a canvas and try to draw an image with 'drawImage(img)' with an ImageBitmap. But the ImageBitmap seems to be read-only…? Any other ways to draw single pixel in compose?

[Draget]

I am going crazy here. Bitmap, ImageBitmap, Skia, Compose, PixelRef… how hard can it be to draw a single damn pixel? x.x

[Casey Brooks]

An ImageBitmap is just that, a bitmap, it’s not meant to be the interface to an image-editing subsystem. What you can do though is draw it to a Canvas, draw your changes to that same canvas, and then capture the output with ImageComposeScene to save it back to file

[Casey Brooks]

If you need to edit an image “headless” (without rendering it to a UI Canvas element), you’ll probably want to move outside of the realm of Compose and use the Java ImageIO API instead

[Kirill Grouchnikov]

What does it mean to “poke at pixels in a bitmap”? Do you want to read the color value at a specific x,y coordinate? Or change the color? Or draw something on top of the bitmap after it’s been drawn on screen?

[Draget]

Set individual pixels.

I mean, when searching for Kotlin and Skia ways to do it, I find .net(!) solutions in Xamarin: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/bitmaps/pixel-bits

Just hoped this was exposed in Compose as well.

Okay, so if I stick to the old ImageIO API, how do I get a java.awt.Image into a Canvas?

[Draget]

Something I am not sure what to make of it: I keep finding code snippets online that simply do not work.

People use Bitmap classes and do things, which no Bitmap I have can do, without specifying the import. Only after some more research I find different 'Bitmap' implementations under Android… but okay, that is the internet. people are not very precise on StackOverflow and blogs, that is okay.

But then I also find Blogs wich use the compose API and still have different APIs: https://www.answertopia.com/jetpack-compose/jetpack-compose-canvas-graphics-drawing-tutorial/ towards the bottom uses import androidx.compose.ui.res.imageResource - something my compose desktop project simply lacks. The blog is not even that old.

[Draget]

Okay, I saw it was deprecated at some point and moved to extension functions of ImagebitMap

[Casey Brooks]

I think you’re confusing yourself with the different image APIs out there. Skia is a cross-platform library which has bindings in many different libraries, and different languages and UI toolkits each have their own version of a Bitmap class which do slightly different things. Some frameworks might allow you to modify that Bitmap in-memory, others might require you to draw it on a canvas and make the changes there. It’s a bit tricky, but in general, the way things work with Bitmaps, Canvas, and other graphics features are probably going to to be very different in Compose vs most other things you’ll find on the internet, because Compose is declarative in its approach to drawing on the canvas.

So don’t take what you see on other frameworks as the same general principle of what you’d do in Compose. Honestly, your best bet here is to dig into the source code for Skiko (the Skia bindings used by Compose Desktop) and Compose Desktop, and see what APIs are available to you. IntelliJ’s auto-complete popup and “Jump to declaration” is your best friend here.

[Casey Brooks]

And with regard to the blog you posted being out-of-date, that’s kinda to be expected at this point. Compose Desktop is still very early in its lifetime. It is technically at a 1.X.X version, but things are still changing in its APIs, especially as Skiko itself changes and matures. Ideally, you shouldn’t have breaking changes, but deprecations are pretty common at this stage. Furthermore, Skiko is meant to be an implementation detail of Compose Desktop, so if you are calling APIs from Skiko, you’re taking on that risk and burden of maintenence yourself, since they’re not really intended to be part of the API surface of a Compose application. It’s there if you need it, or like @Kirill Grouchnikov (who’s building an alternative to the Material theme with Aurora) are willing to dig into features that are beyond just the core APIs of Compose itself

[Draget]

I understand.

Tho I still belive it is a bit sad to not have any way of manipulating Bitmap data (manipulating single pixels) desipte going full share-coding.

[Kirill Grouchnikov]

You can call ImageBitmap.asSkiaBitmap to get a org.jetbrains.skia.Bitmap. From there you can call readPixels and installPixels.

[Kirill Grouchnikov]

https://github.com/kirill-grouchnikov/aurora/blob/d8b520bf23750c9fe784a0b703909d2d[…]/kotlin/org/pushingpixels/aurora/skin/utils/TextureGenerator.kt has some sample code on how to create an ImageBitmap completely in code

[Kirill Grouchnikov]

Some underlying Skiko / Compose Desktop APIs might have changed since then

[Kirill Grouchnikov]

In general, it is not recommended to go down the road of manipulating individual pixels like that, since that would offload the textures off of the GPU path and make a software-backed copy. You would end up with a slower pipeline. This is why I’ve converted all that code to use Skia shaders.