Can't draw graphics above image

[rubik83]

if i create a custom widget with this draw function :

    fn draw(
        &self,
        _renderer: &mut Renderer<B>,
        _defaults: &Defaults,
        layout: Layout<'_>,
        _cursor_position: Point,
        _viewport: &Rectangle,
    ) -> (Primitive, mouse::Interaction) {
        let bounds = layout.bounds();
        let handle = iced::image::Handle::from_path("map.png");
        let prim_image = Primitive::Image { handle, bounds };

        let prim_quad = Primitive::Quad {
            bounds: Rectangle {
                x: bounds.center_x(),
                y: bounds.center_y(),
                width: 200.0,
                height: 100.0,
            },
            background: Background::Color(Color::BLACK),
            border_radius: 20.0,
            border_width: 0.0,
            border_color: Color::TRANSPARENT,
        };
        let prim_group = Primitive::Group {
            primitives: vec![prim_image, prim_quad],
        };
        (prim_group, mouse::Interaction::default())
}

image is always above quad whatever the order in the vector

let prim_group = Primitive::Group {
    primitives: vec![prim_image, prim_quad],
};

or

let prim_group = Primitive::Group {
    primitives: vec![prim_quad, prim_image],
};

I use Ubuntu 20.04

There is another method to draw graphics above image ?

[13r0ck]

I'm not sure I totally understand your issue. It would be nice if you included some screenshots 😃

Layering in Iced is still very limited. You might have more luck using the canvas widget to create what you are trying to?

[rubik83]

I did not find any function fill_image with Frame of canvas widget

[13r0ck]

I still don't understand what you are trying to do. Can you please elaborate?

[rubik83]

I want add a galaxy on background of the solar_system example.

With these lines in graphics/src/widget/canvas/frame.rs :

    /// Draw image in frame
    pub fn fill_image(
        &mut self,
        handle: iced_native::image::Handle,
        bounds: Rectangle,
    ) {
        self.primitives.push(Primitive::Image { handle, bounds });
    }

and theses lines in exemples/solar_system/src/main.rs (before draw earth) :

            let galaxie = iced::image::Handle::from_path("galaxie.jpg");
            frame.fill_image(
                galaxie,
                Rectangle {
                    x: center.x + Self::ORBIT_RADIUS,
                    y: center.y,
                    width: 50.0,
                    height: 50.0,
                },
            );

I got this :

But earth is not over the galaxy

[13r0ck]

Oh gotcha. I'm not familiar enough with the iced layering system to help you our much, sorry. I do know the tool tip widget creates a container over top of another widget (that can have a transparent background). What you might be able to do is similar to how the tooltip layering works is create the solar system on-top of the galaxy image, but make it persistent rather than only on hover.

[rubik83]

thank you. it would be interesting to transfer the discussion to bug for the next versions