How to draw an image in a Canvas ?

[ikus060]

Hello,

For my application, I need to create a custom widget that won't exists out of the box on any platform. For that reason, I intend to use Canvas to manually draw the content of the widget. I'm starting to experiment with it, but I'm already facing an issue. Reading the documentation closely, I don't see an API to draw an image in the Canvas.

Basically, I have SVG or PNG files that I want to get drawn in the Canvas at specific position.

Here a screenshot of the expected result:

I need to draw the exclamation, the check mark, the chevron, etc. I wish to reuse the existing PNG or SVG file as I don't want to manually draw them using programing. Is it possible ?

[freakboy3742]

You haven't missed anything - canvas doesn't support bitmap images. Canvas is a purely vector surface. It's likely possible to implement support for bitmaps on canvas, but the feature isn't there at present.

However, more generally, my immediate reaction is that a canvas is almost certainly the wrong foundation on which to build this. It's a bare-bones drawing surface, not something intended for constructing complex UI widgets. It may superficially have the features that seem like a match for building a widget, like drawing text and handling mouse clicks - but the resulting widget won't look very native widget, as you need to take control of the entire drawing process, and the entire process of targeting clicks - and that will be almost impossible to get right, especially in a cross-platform way.

My suggestion would be to relax your expectations on the exact appearance of your app, and work with the tools that Toga provides. For example - in this screenshot, you have what looks like a "start backup now" button. The "low friction" approach in Toga is to make this a button, not try and develop a highly customized look and feel to avoid using a button. Where you've got a text label, followed by an icon, with a possible call to action - use a Label, an Image, and a Button with an icon. Yes, this will look different to your screenshot. However, it will be a lot less work, and it will be visually consistent with the widgets on each platform.

[ikus060]

Hello @freakboy3742

Thanks for helping again. My understanding is it won't be possible to create something identical to my screenshot and I need to adjust the design to accommodate current Toga limitation. Using Canvas is not a solution to workaround these limitation.

[HalfWhitt]

It's important to keep in mind that Toga's intention is to provide a native experience on each platform, and it generally prioritizes that over customization. So this is a current limitation, but it's likely to be a future limitation as well.

Other frameworks like Qt and Kivy might be better options if you really need/want complete control over how your app and its interface looks. Of course, you'd then lose (or have to reimplement) a lot of the platform-native behavior that Toga provides.

[LSAB23]

Hello @freakboy3742
I was searching online for an answer to the same problem and couldn't find one , so i created one it is not perfect but for small images like images less than 100X100 pixels it works find. here's a link to the project if you or anyone searching ever comes across this problem.

[freakboy3742]

An interesting approach. That will definitely work, but performance will degrade fairly quickly as images get larger. But, as you say -for small images, it might be sufficient.

[johnzhou721]

This capability is currently missing in Toga. See #4206 — there's probably also #785 to sort out to implement implement the navigation arrows to the trailing side of the image — we'd need to add a > arrow style to DetailedList as well.

For "start backup now", your best bet is to use a button, agreed.

See #955 (closed) for the solution to draw things on Canvas.