SDL2笔记06_SDL2透明背景窗口_windows10_使用cairo和sdl_texture在透明背景上绘制（偏色）

最新推荐文章于 2022-11-24 11:50:45 发布
最新推荐文章于 2022-11-24 11:50:45 发布
阅读量895 收藏 2
点赞数
分类专栏： SDL学习笔记 文章标签： c++ SDL Cairo 背景透明
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31036127/article/details/119970133
版权

  1. 这篇git提供了简单的cairo绘制到sdlTexture上的方法
    https://gist.github.com/sprae/607305450c51ccc482b78bdadadb9af6链接

  2. 配置makefile

         cmake_minimum_required(VERSION 3.19)
     project(main)
     set(SDL2_DIR G:/Xubuntu_Work_Space/From_Xubuntu/codeTest_2019_2_21/SDL2/win/SDL2-devel-2.0.14-mingw/SDL2-2.0.14/x86_64-w64-mingw32)
     set(SDL2_IMAGE_DIR G:/Xubuntu_Work_Space/From_Xubuntu/codeTest_2019_2_21/SDL2/win/SDL2_image-devel-2.0.5-mingw/SDL2_image-2.0.5/x86_64-w64-mingw32)

     set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -std=c++11 -lmingw32")
     set(CMAKE_EXE_LINKER_FLAGS "-static-libgcc -static-libstdc++")

     # GTK3的include
     include_directories(
             H:/mysoft/clion/clionWorkSpace/gtk+364/include
             H:/mysoft/clion/clionWorkSpace/gtk+364/include/gtk-3.0
             H:/mysoft/clion/clionWorkSpace/gtk+364/include/cairo
             H:/mysoft/clion/clionWorkSpace/gtk+364/include/gdk
             H:/mysoft/clion/clionWorkSpace/gtk+364/include/glib-2.0
             H:/mysoft/clion/clionWorkSpace/gtk+364/include/pango-1.0
             H:/mysoft/clion/clionWorkSpace/gtk+364/include/atk-1.0
             H:/mysoft/clion/clionWorkSpace/gtk+364/include/gdk-pixbuf-2.0
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/glib-2.0/include
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/gtk-3.0/include
     )

     # SDL2的include
     include_directories(
             ${SDL2_DIR}/include/SDL2
             ${SDL2_IMAGE_DIR}/include/SDL2
     )

     link_directories(
             ${SDL2_DIR}/lib
             ${SDL2_IMAGE_DIR}/lib
     )

     link_libraries(
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libatk-1.0.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libcairo-gobject.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libcairo-script-interpreter.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libcairo.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libcroco-0.6.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libffi.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libfontconfig.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libfreetype.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libgailutil-3.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libgdk-3.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libgdk_pixbuf-2.0.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libgio-2.0.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libglib-2.0.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libgmodule-2.0.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libgobject-2.0.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libgthread-2.0.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libgtk-3.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libjasper.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libjpeg.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/liblzma.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libpango-1.0.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libpangocairo-1.0.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libpangoft2-1.0.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libpangowin32-1.0.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libpixman-1.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libpng.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libpng15.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/librsvg-2.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libtiff.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libtiffxx.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libxml2.dll.a
             H:/mysoft/clion/clionWorkSpace/gtk+364/lib/libz.dll.a
     )

     set(SOURCE_FILES main.cpp TransparentWindow.hpp)
     add_executable(main ${SOURCE_FILES})

     target_link_libraries(main mingw32 SDL2main SDL2 SDL2_image)

  3. 第一步：windows将SDL_Window背景设为透明，可直接调用windowColorKey代码

        COLORREF defaultTransparentColor = RGB(255, 0, 255);
 	
 	bool windowColorKey(SDL_Window *window, COLORREF colorKey) {
 	    SDL_SysWMinfo wmInfo;
 	    SDL_VERSION(&wmInfo.version);  // Initialize wmInfo
 	    SDL_GetWindowWMInfo(window, &wmInfo);
 	    HWND hWnd = wmInfo.info.win.window;
 	
 	    // Change window type to layered
 	    SetWindowLong(hWnd, GWL_EXSTYLE, GetWindowLong(hWnd, GWL_EXSTYLE) | WS_EX_LAYERED);
 	
 	    // Set transparency color
 	    return SetLayeredWindowAttributes(hWnd, colorKey, 0, LWA_COLORKEY);
 	}

  4. 第二步，绑定cairo和sdlTexture，有两种方式可用（缺点：当画笔大小为1的时候颜色不对，不知怎么解决）

    1. 方式一 : 建立cairo, 建立texture, 在cairo上画图，然后update过去
      // 方式一 : 建立cairo, 建立texture, 在cairo上画图，然后update过去
int windowWidth = 640, windowHeight = 480;
surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, windowWidth, windowWidth);
cr = cairo_create(surface);
cairo_set_line_width(cr, 1);
// 画个圆角矩形, 发现颜色不对
cairo_set_source_rgba(cr, 1, 0, 0, 1);
draw_round_rectangle(cr, 100, 100, 180, 120, 10);

cairo_stroke(cr);
unsigned char *data = cairo_image_surface_get_data(surface);

SDL_Texture *texture;
SDL_Rect rect = {.x=0, .y=0, .w=windowWidth, .h=windowHeight};

texture = SDL_CreateTexture(renderer, SDL_PIXELFORMAT_ARGB8888, SDL_TEXTUREACCESS_STREAMING, windowWidth,
                            windowHeight);
// 设置texture为混合模式
SDL_SetTextureBlendMode(texture, SDL_BLENDMODE_BLEND);
int widthPitch = windowWidth << 2;
// 更新过去
SDL_UpdateTexture(texture, &rect, data, widthPitch);
    2. 方式二：直接建立sdlTexture然后从sdlTexture的像素数据建立cairo
          // 方式二 : 建立texture, 从texture的像素数据建立cairo, 直接画到texture上去
    // 可能比方式一快, 我没读过cairo_image_surface_create_for_data的源码，不敢妄下定论
    SDL_Texture *texture;
    SDL_Rect rect = {.x=0, .y=0, .w=640, .h=480};

    texture = SDL_CreateTexture(renderer, SDL_PIXELFORMAT_ARGB8888, SDL_TEXTUREACCESS_STREAMING, rect.w, rect.h);
    SDL_SetTextureBlendMode(texture, SDL_BLENDMODE_BLEND);

    void *pixel;
    int pitch = 4*rect.w; // 一行的像素字节  ARGB32=4 byte, w = 640
    SDL_LockTexture(texture, &rect, &pixel, &pitch);
    surface = cairo_image_surface_create_for_data(
            (unsigned char*) pixel,
            CAIRO_FORMAT_ARGB32, rect.w, rect.h, pitch
            );
    SDL_UnlockTexture(texture);
    cr = cairo_create(surface);
    cairo_set_line_width(cr, 10);
    cairo_set_source_rgb(cr, 255, 0, 0);
    draw_round_rectangle(cr, 100, 100, 50, 60, 10);
    cairo_stroke(cr);

  5. 完整代码

     	#include <SDL.h>
 	#include <cairo.h>
 	#include <SDL_syswm.h>
 	#include "windows.h"
 	
 	COLORREF defaultTransparentColor = RGB(255, 0, 255);
 	
 	bool windowColorKey(SDL_Window *window, COLORREF colorKey) {
 	    SDL_SysWMinfo wmInfo;
 	    SDL_VERSION(&wmInfo.version);  // Initialize wmInfo
 	    SDL_GetWindowWMInfo(window, &wmInfo);
 	    HWND hWnd = wmInfo.info.win.window;
 	
 	    // Change window type to layered
 	    SetWindowLong(hWnd, GWL_EXSTYLE, GetWindowLong(hWnd, GWL_EXSTYLE) | WS_EX_LAYERED);
 	
 	    // Set transparency color
 	    return SetLayeredWindowAttributes(hWnd, colorKey, 0, LWA_COLORKEY);
 	}
 	
 	
 	static void
 	draw_round_rectangle(cairo_t *cr,
 	                     double x, double y,
 	                     double width, double height, double r) {
 	    cairo_move_to(cr, x + r, y);
 	    cairo_line_to(cr, x + width - r, y);
 	
 	    cairo_move_to(cr, x + width, y + r);
 	    cairo_line_to(cr, x + width, y + height - r);
 	
 	    cairo_move_to(cr, x + width - r, y + height);
 	    cairo_line_to(cr, x + r, y + height);
 	
 	    cairo_move_to(cr, x, y + height - r);
 	    cairo_line_to(cr, x, y + r);
 	
 	    cairo_arc(cr, x + r, y + r, r, M_PI, 3 * M_PI / 2.0);
 	    cairo_arc(cr, x + width - r, y + r, r, 3 * M_PI / 2, 2 * M_PI);
 	    cairo_arc(cr, x + width - r, y + height - r, r, 0, M_PI / 2);
 	    cairo_arc(cr, x + r, y + height - r, r, M_PI / 2, M_PI);
 	}
 	
 	int main(int argc, char *argv[]) {
 	    SDL_Init(SDL_INIT_VIDEO);
 	
 	    SDL_Window *window;
 	    SDL_Renderer *renderer;
 	    SDL_CreateWindowAndRenderer(640, 480, SDL_WINDOW_ALWAYS_ON_TOP, &window, &renderer);
 	    windowColorKey(window, defaultTransparentColor);
 	    SDL_SetWindowTitle(window, "Cairo test");
 	
 	    cairo_surface_t *surface;
 	    cairo_t *cr;
 	#if 1
 	    // 方式一 : 建立cairo, 建立texture, 在cairo上画图，然后update过去
 	    int windowWidth = 640, windowHeight = 480;
 	    surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, windowWidth, windowWidth);
 	    cr = cairo_create(surface);
 	    cairo_set_line_width(cr, 1);
 	    // 画个圆角矩形, 发现颜色不对
 	    cairo_set_source_rgba(cr, 1, 0, 0, 1);
 	    draw_round_rectangle(cr, 100, 100, 180, 120, 10);
 	
 	    cairo_stroke(cr);
 	    unsigned char *data = cairo_image_surface_get_data(surface);
 	
 	    SDL_Texture *texture;
 	    SDL_Rect rect = {.x=0, .y=0, .w=windowWidth, .h=windowHeight};
 	
 	    texture = SDL_CreateTexture(renderer, SDL_PIXELFORMAT_ARGB8888, SDL_TEXTUREACCESS_STREAMING, windowWidth,
 	                                windowHeight);
 	    // 设置texture为混合模式
 	    SDL_SetTextureBlendMode(texture, SDL_BLENDMODE_BLEND);
 	    int widthPitch = windowWidth << 2;
 	    // 更新过去
 	    SDL_UpdateTexture(texture, &rect, data, widthPitch);
 	#else
 	    // 方式二 : 建立texture, 从texture的像素数据建立cairo, 直接画到texture上去
 	    // 可能比方式一快, 我没读过cairo_image_surface_create_for_data的源码，不敢妄下定论
 	    SDL_Texture *texture;
 	    SDL_Rect rect = {.x=0, .y=0, .w=640, .h=480};
 	
 	    texture = SDL_CreateTexture(renderer, SDL_PIXELFORMAT_ARGB8888, SDL_TEXTUREACCESS_STREAMING, rect.w, rect.h);
 	    SDL_SetTextureBlendMode(texture, SDL_BLENDMODE_BLEND);
 	
 	    void *pixel;
 	    int pitch = 4*rect.w; // 一行的像素字节  ARGB32=4 byte, w = 640
 	    SDL_LockTexture(texture, &rect, &pixel, &pitch);
 	    surface = cairo_image_surface_create_for_data(
 	            (unsigned char*) pixel,
 	            CAIRO_FORMAT_ARGB32, rect.w, rect.h, pitch
 	            );
 	    SDL_UnlockTexture(texture);
 	    cr = cairo_create(surface);
 	    cairo_set_line_width(cr, 10);
 	    cairo_set_source_rgb(cr, 255, 0, 0);
 	    draw_round_rectangle(cr, 100, 100, 50, 60, 10);
 	    cairo_stroke(cr);
 	#endif
 	
 	    SDL_Event event;
 	    bool is_working = true;
 	    while (is_working) {
 	        while (SDL_PollEvent(&event)) {
 	            switch (event.type) {
 	                case SDL_QUIT:
 	                    SDL_DestroyWindow(window);
 	                    SDL_DestroyRenderer(renderer);
 	                    SDL_Quit();
 	                    is_working = false;
 	                    break;
 	            }
 	        }
 	
 	        SDL_SetRenderDrawColor(renderer, 255, 0, 255, 255);
 	        SDL_RenderClear(renderer);
 	        SDL_RenderCopy(renderer, texture, NULL, NULL);
 	        SDL_RenderPresent(renderer);
 	        SDL_Delay(66);
 	    }
 	
 	    return 0;
 	}

  6. 运行截图
    在这里插入图片描述

马角的逆袭
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
swc.zip_linux v4l2 qt_sdl_sdl camera_swc_v4l2 s
09-20
些软件实现了linux下v4l2及SDL框架的摄像头程序
嵌入式 Color Keying（抠色）SDL背景透明
skdkjxy的专栏
12-02 2655
照翻教程）现在你即将要学习如何使用color key，用English来说就是这个教程将要教你如何在使用一个表面的时候将其背景色去掉。SDL_Surface结构有一个叫做color key的结构，也就是代表了你在bliting表面的时候不想予以显示的颜色，当你想使用透明表面的时候这个是灰常有用滴！ 如图，小人的背景是青色的（R：0，G：FF，B：FF），那么我们现在要将小人背景透明化，则现在的c
SDL2笔记05_SDL2透明背景窗口_windows10_使用sdl_texture绘图
马角的逆袭的博客
08-22 1416
本节课学习使用SDL2封装一个透明背景的window，并在window上使用SDL_Renderer和SDL_Texture进行绘图 圆形没有反走样 计算机几何算法B站有个孔令德老师讲课挺好的，建议看看 （我只看了两节课，后面工作不忙了再认真看，图论与网络流还没开始看，把SDL和GTK大致学一下再去看把，档期可能要排到明年才能开始看了） 在windows上要想让SDL_Window和linux不太一样（linux可以直接读取css设置） 经过多次google终于在这个网址找到了做法http.
c++11 新特性学习
feidaji的博客
09-26 596
1. lambda 表达式 C++ 11 Lambda表达式 - 滴水瓦 - 博客园 Lambda表达式完整的声明格式如下： [capture list] (params list) mutable exception-> return type { function body } 各项具体含义如下 capture list：捕获外部变量列表 params list：形参列表 mutable指示符：用来说用是否可以修改捕获的变量 exception：异常设定 return type
SDL2笔记04_使用Cairo在SDL2上画图01
马角的逆袭的博客
08-22 748
先贴一份github上的代码https://github.com/tsuu32/sdl2-cairo-example 不知道是不是版本问题，有一行编译会报错，注释掉就能跑了 #include <stdio.h> #include <stdbool.h> #include <SDL.h> #include <cairo/cairo.h> int main(int argc, char *argv[]) { SDL_Init(SD..
sdl实现texture透明
qq_38124598的博客
07-03 2124
sdl可以实现一些图片，文字透明，实现renderer透明。这里说的是texture透明，关于其他透明函数，请查看：
cairo和pixman库给bmp图片加文字水印
Luobooooo的博客
12-23 1774
两个步骤 1，用cairo库来生成一个图片，然后在上面把文字写到图片上 主要用到cairo_image_curface_surface_create，生成一个空白的图(为了把文字向上写） cairo_public cairo_surface_t * cairo_image_surface_create (cairo_format_t format, int width, int height); .
sdl2_image.tar.gz_SDL2_image_jpg
09-23
linux下，sdl2_image 可以采集各类图片，包括png，jpg等。
SDL.rar_2D_2d 游戏_SDL粒子渲染_sdl_易语言udt
09-19
是一款2d游戏引擎，用了他可以轻松的进行2d游戏编程。
SDL_ttf-2.0.9.rar_.ttf_SDL_ttf-2_TTFILk_sdlttf_ttfiLk下载
09-20
SDL-ttf 2.0.9 TTF 繪製程序源碼
SDL-devel-1.2.11-mingw32.rar_SDL Windows20_SDL-1.2.15_SDL-dev_sd
09-20
windowsXP/2003平台安装ffmpeg所需SDL开发安装包!
自绘按钮的实现
norains的专栏
01-12 8622
//========================================================================//TITLE://    自绘按钮的实现//AUTHOR://    norains//DATE://    Saturday  12-January-2008//Environment://    VS2005 + SDK-WINCE5.0-MIP
Clion配置SDL2开发环境（Windows系统）
ronaldinho2014的专栏
03-13 3054
简单记录一下Windows系统下，Clion配置SDL2开发环境过程
cmakelists 加入外部已安装的SDL2
ooyyee的专栏
05-26 900
# 声明一个变量SDL2_DIR为SDL2安装路径 set(SDL2_DIR /usr/include/SDL2) # 设置要包含的头文件的路径 include_directories(${SDL2_DIR}/include) # 设置要关联的库的路径 link_directories(${SDL2_DIR}/bin) #生成可执行文件 注意顺序 ADD_EXECUTABLE(CMakeFF main.c) #为hello添加ffmpeg共享库链接 target_link_libraries( ...
cario库
师从小白
11-24 870
cario
SDL2渲染RGB图像
qq_52484093的博客
03-23 756
SDL 的相关函数 使用 SDL 渲染 RGB 图像 #include <iostream> #include <memory> #include <sdl/SDL.h> #undef main #pragma comment(lib, "SDL2.lib") using namespace std; int main() { const int w = 800; const int h = 600; // 1. 初始化 SDL...
SDL_Texture 对象的使用方法
杂七杂八
10-27 3047
前两篇博客，说明了如何获取 bmp,png 图像数据内容,然后在SDL 中逐像素绘制出来. bmp格式由于比较简单，采用的是自己读文件，把图像数据拷贝出来的形式; png格式比较复杂，用 libpng ，获取图像数据 最终都是把图像数据放到 一段连续的,自己 new unsigned char[xxx] 的一段内存里。 然后,逐像素调用 SDL_RenderDrawPoint(
我的Qt作品（9）Qt使用Cairo绘图引擎提升抗锯齿效果【开源】
$firecat利白的代码足迹$
02-13 4266
Cairo：C编写的开源绘图引擎（基于LGPL协议），大名鼎鼎的FireFox就是用这个绘图引擎的。Cairo是非常流行的开源2D图形渲染引擎库，它支持包括X-Windos，Win32，图像，pdf在内的各种输出设备。目前，Cairo已被广泛的使用在多个平台上来渲染图形界面，包括Firefox/Webkit-EFL/GTK+/Poppler/Qt等等。Qt的QPainter提供的抗锯齿效果没有cairo的好。cairo是用C编写的，但是为大多数常用的语言提供了绑定。
Wayland的HDC：cairo绘图库
chenie3544的博客
05-20 264
HCAIRO -- cairo graphics library drawing context 头文件：<cairo.h> 库文件：-lcairo 函数： cairo_set_source_rgb() cairo_set_source_rgba() ...
SDL2中SDL_ConvertSurface无法将bmp设置成ARGB1555
最新发布
06-13
SDL2 中的 `SDL_ConvertSurface` 函数可以转换表面的像素格式，但是不是所有的像素格式都可以转换成 ARGB1555 格式。如果你尝试将一个 BMP 图像转换成 ARGB1555 格式，可能会失败。 原因是 BMP 图像格式不支持 ARGB...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值