Support for Affine Transform and the Canvas widget.

[xb284524239]

Adding Affine Transform to one or a group of widgets can produce some pretty cool UI effects, such as scaling, flipping, translating, rotating, and shearing. Does the Slint team have any plans for implementing such features?

Additionally, there's currently no Canvas widget in the standard library. Will a Canvas widget be added in the future? Should I use the Path widget instead, or should I wait for a future Canvas widget?

[tronical]

Support for generic rotation is something we're tracking with #1481 . The two main challenges with implementing this is support for it in the software renderer and supporting this for partial rendering.

For scaling/translation, etc. we need to find a good API to describe this in a declarative way. The CSS transform syntax is quite nice IMO.

For a canvas widget there ways of how the application could interface with a 2D canvas:

1. The approach that always works (already today) is that the interface between the application and the canvas is a 2D image buffer. An Image element in Slint does the trick, and native code can render into a slint::SharedPixelBuffer and convert that into an Image.
2. The other approach, much more complex, is to design a 2D rendering API in C++, Rust, JavaScript, and Python that connects to the individual rendering backends in Slint, and implement that. I'm unsure how much of that should be in Scope for Slint itself.

What do you have in mind when you're thinking of a Canvas widget?

[xb284524239]

For scaling/translation, etc. we need to find a good API to describe this in a declarative way. The CSS transform syntax is quite nice IMO.

Agreed.

What do you have in mind when you're thinking of a Canvas widget?

My goal is to develop medical image viewing software. During diagnosis, doctors annotate and measure regions of interest on medical images. For example, they draw lines to measure the length of a wound, or outline the edges of a wound with rectangles, circles, triangles, polygons, Bezier curves, etc., typically by dragging the mouse. Additionally, they rotate, scale, crop, and translate the images to better observe the lesion.

In my case, using the Canvas widget might not be the optimal choice. For instance, if I draw some rectangles on a canvas widget and want to change their size or position dynamically by dragging the mouse, this can often be complex because shapes in the Canvas widget do not receive mouse events.

If I were using Qt, I would use QGraphicsView/QGraphicsItem and their subclasses to implement these features. However, in Slint, I'm unsure about the best approach to achieve this. Could you give me some advice? Thank you very much!

The following screenshot is provided only as an illustrative example.

[ubruhin]

If I were using Qt, I would use QGraphicsView/QGraphicsItem and their subclasses to implement these features. However, in Slint, I'm unsure about the best approach to achieve this.

FYI I have the same situation/problem (currently using QGraphicsScene framework) and did some experiments with Slint, maybe it is of your interest: #5704

[xb284524239]

Thanks for your experiments. But I plan to develop my program exclusively with Slint, without Qt. Because the QWidget framework could not support GPU rendering, and exhibit tearing when using non-integer scale factors on high DPI screens. I have reported an issue to upstream but not received a response yet. QTBUG-127548

[ogoffart]

I think the way i'd implement this screenshot is to have an Image in the "background" and then using a for loop, place Image or Path or Rectangle with Text on top based on a model.

[xb284524239]

Thanks, I will try it.