minigui/mgncs:自定义渲染器(renderer)实现透明背景按钮(transparent button)

「爱情、让人受尽委屈。」 2022-05-13 23:54 249阅读 0赞

一般来说，对于`mStatic`,`mImage`这样的控件，只要设置了透明属性(`transparent=true`),就可以实现背景透明，但对于`mButton`按钮却不行，即使设置了透明属性，也不能实现透明背景。

miniStudio中对按钮设置透明属性示例：  
![这里写图片描述][70]  
这是为什么呢？通过跟踪`minigui/mgncs`的代码发现了原因:  
以下是`libmgncs-1.2.0/src/renderer/flat/flat_boxpieces.c`中，按钮类(`mButtonBoxPiece`)渲染器的`paint`处理函数(`flat`风格)的代码：

// button box
    static void flat_buttonbox_paint(mButtonBoxPiece *self, HDC hdc, mWidget * owner, DWORD add_data)
    {
        RECT rc;
    
        if(!_c(self)->getRect(self, &rc))
            return ;
    
        flat_draw_3dbox(hdc, &rc, NCSRF_FILL, add_data&NCS_PIECE_PAINT_STATE_MASK,
                NCS_PIECE_PAINT_GET_CHECK(add_data), owner);
    }

从这个代码可以看出，每次重绘窗口区域时，不论是否有设置透明属性，都会先调用`flat_draw_3dbox`函数填充背景。  
其他风格的渲染器处理`mButtonBoxPiece`的逻辑也是一样的(`classic`,`fashion`,`skin`,`flat`)  
![这里写图片描述][70 1]

知道了原因，解决问题的方案就有了

# 解决方案1 #

修改`libmgncs`源码：  
还以上面的`flat_buttonbox_paint`函数为例，在函数开始添加一行代码判断透明属性是否设置就可以了。

// button box
    static void flat_buttonbox_paint(mButtonBoxPiece *self, HDC hdc, mWidget * owner, DWORD add_data)
    {
        /* 如果有透明直接返回 */
        if(GetWindowExStyle(owner->hwnd) & WS_EX_TRANSPARENT)return;
        RECT rc;
    
        if(!_c(self)->getRect(self, &rc))
            return ;
    
        flat_draw_3dbox(hdc, &rc, NCSRF_FILL, add_data&NCS_PIECE_PAINT_STATE_MASK,
                NCS_PIECE_PAINT_GET_CHECK(add_data), owner);
    }

上面这样修改带来的效果就是按钮边框也没有了。如果你要背景透明但还希望画上按钮边框，修改如下：

static void flat_buttonbox_paint(mButtonBoxPiece *self, HDC hdc, mWidget * owner, DWORD add_data)
    {
        // 根据透明背景属性来决定flat_draw_3dbox函数的flag参数
        int flag = GetWindowExStyle(owner->hwnd) & WS_EX_TRANSPARENT ? 0 : NCSRF_FILL;
        RECT rc;
    
        if(!_c(self)->getRect(self, &rc))
            return ;
    
        flat_draw_3dbox(hdc, &rc, flag, add_data&NCS_PIECE_PAINT_STATE_MASK,
                NCS_PIECE_PAINT_GET_CHECK(add_data), owner);
    }

# 解决方案2 #

如果你不想修改源码，可以在外部自己为`mButtonBoxPiece`写个渲染器函数，然后调用`ncsRegisterCtrlRDRs`替换掉`flat_buttonbox_paint`函数就可以了：

#include <minigui/common.h>
    #include <minigui/minigui.h>
    #include <minigui/gdi.h>
    #include <minigui/window.h>
    #include <minigui/fixedmath.h>
    
    #include <mgncs/mgncs.h>
    // 自定义的mButtonBoxPiece 渲染器函数,do nothing
    static void transparent_buttonbox_paint(mButtonBoxPiece *self, HDC hdc, mWidget * owner, DWORD add_data)
    {
    }
    
    //init boxpiece
    void transparent_init_boxpiece_renderer(void)
    {
        NCS_RDR_ENTRY entries [] = {
            {Class(mButtonBoxPiece).typeName, (mWidgetRenderer*)(void*)transparent_buttonbox_paint},
        };
        // 注册控件的渲染器函数,修改flat风格的button渲染器函数,
        // 可以用这个函数同时替换其他风格(`classic`,`fashion`,`skin`,`flat`)的对应函数
        ncsRegisterCtrlRDRs("flat",
            entries,
            sizeof(entries)/sizeof(NCS_RDR_ENTRY));
        ncsRegisterCtrlRDRs("classic",
            entries,
            sizeof(entries)/sizeof(NCS_RDR_ENTRY));
        ncsRegisterCtrlRDRs("fashion",
            entries,
            sizeof(entries)/sizeof(NCS_RDR_ENTRY));
        ncsRegisterCtrlRDRs("skin",
            entries,
            sizeof(entries)/sizeof(NCS_RDR_ENTRY));
    }

注意要在应用程序启动前调用`transparent_init_boxpiece_renderer`函数完成`transparent_buttonbox_paint`的注册。  
同样，如果你希望背景透明的同时保留按钮边框。上面`transparent_buttonbox_paint`要这样写：

// 声明外部调用函数
    void flat_draw_3dbox(HDC hdc, const RECT *rc, int flag ,int state, int check_state, mWidget *owner);
    
    static void transparent_buttonbox_paint(mButtonBoxPiece *self, HDC hdc, mWidget * owner, DWORD add_data)
    {
        int flag = GetWindowExStyle(owner->hwnd) & WS_EX_TRANSPARENT ? 0 : NCSRF_FILL;
        RECT rc;
    
        if(!_c(self)->getRect(self, &rc))
            return ;
    
        flat_draw_3dbox(hdc, &rc, flag, add_data&NCS_PIECE_PAINT_STATE_MASK,
                NCS_PIECE_PAINT_GET_CHECK(add_data), owner);
    }

有边框的背景透明按钮和无边框的透明背景按钮的显示效果对比：  
![这里写图片描述][70 2]![这里写图片描述][70 3]

注意:修改渲染器(renderer)对所有同类型的控件都有效

[70]: /images/20220514/236702916cab4965a71bebf619da5017.png
[70 1]: /images/20220514/e36db1a54d2d4330b76b58c1f5ade369.png
[70 2]: https://img-blog.csdn.net/20180830140041445?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0LzEwa20=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: /images/20220514/80caf9450da84e4b819719549a5af5c1.png