[图形引擎Skia之二]开发环境搭建

前言

首先呢,在搭建开发环境之前,请确保你已经编译出了对应平台的library :
Windows : skia.dll , skia.dll.lib
Linux : libskia.a , libskia.so
如果没有编译出来或者还不知道怎么编译,请参考我的上一篇文章,根据你需要的平台下载源码进行编译:
[图形引擎Skia之一]源码下载与编译(Windows)
[图形引擎Skia之一]源码下载与编译(Ubuntu)

为了各位方便,这里提供编译好的 Windows x86 及 Windows x64 版本的 skia 相关开发文件
百度网盘

准备工作

首先呢,Skia就是一个单纯的2D图形引擎而已,他并不像Cairo那样All In One,所以呢,并不包含窗体,事件,线程,UI更新等功能,但是我们开发应用程序则需要这些功能,那么怎么办呢?当然有办法啦,我的解决办法就是使用SDL2来承载Skia,实现跨平台的功能,并解决我们的窗体创建,事件,线程,UI更新等.关于SDL2是什么,我这里就不多说了,不懂的小伙伴自行百(gu)度(ge).
既然我们要开发应用程序,那么就需要搭建开发环境啦,对应的平台选择对应的开发环境,我的开发环境如下,各位小伙伴们可以参考参考:
Windows :
桌面环境 : Windows 10 X64 Professional
开发环境 : Visual Studio 2017 Enterprise
依赖环境 : SDL2 , Skia
Ubuntu :
桌面环境 : Ubuntu 16.04 X64 STL
开发环境 : JetBrains CLion 2017.3.3
依赖环境 : libsdl2-dev Skia libfontconfig1-dev freeglut3-dev libfreetype6-dev libgif-dev libglu1-mesa-dev libpng12-dev libqt4-dev
依赖安装 :

$ sudo apt install libsdl2-dev libfontconfig1-dev freeglut3-dev libfreetype6-dev libgif-dev libglu1-mesa-dev libpng12-dev libqt4-dev

Windows开发环境搭建

首先呢,打开你的Visual Studio,然后新建一个项目,选择Visual C++,选择空项目,并填上你的应用名称,选择好你的创建路径.

create_new_project_with_windows.png

然后确定,等待项目创建完成.创建完成之后,如果你编译的平台是x64,则需要切换构建的平台,不然链接的时候会报错.

select_platform_with_windows.png

紧接着,右键创建的项目,注意,是项目,不是解决方案,然后选择属性.

config_project_with_windows.png

在属性窗口的左边选择配置属性->VC++ 目录,找到包含目录并点击编辑.

add_include_files_with_windows.png

添加skia源码目录下的include文件夹以及 include目录下的所有文件夹,别忘了还有SDL2的include文件夹

add_include_directory_with_windows.png

然后点击确定,之后再属性窗口左边找到连接器选项,选择常规,并点击编辑附加目录库.

add_library_directory_with_windows.png

然后添加skia.dll.lib所在的目录和SDL2.lib所在的目录, 注意选择与你的构建平台对应的目录.

add_library_directory_2_with_windows.png

之后点击确定,选择属性窗口左边的输入,并点击编辑附加依赖项,添加skia.dll.lib, SDL2.lib, SDL2main.lib

add_library_file_with_windows.png

然后点击确定,在属性窗口点击应用并点击确定关闭属性窗口.
之后就是你的编码工作了,我会在本文末尾贴上此处的代码.

skia_run_with_windows.png

填坑(Windows)
1.如果出现 LNK156:必须定义入口点 这类错误,请右键项目->属性->连接器->系统->子系统->选择 窗口 (/SUBSYSTEM:WINDOWS) 然后确定即可.

not_found_main_method.png

select_system_type_with_windows.png

2.如果出现SDL2.dll未找到的错误或者skia.dll未找到的错误,则需要将skia.dll和SDL2.dll复制到Visual Studio的编译输出目录即可.

not_found_SDL2_dll.png

not_found_skia_dll.png

copy_library_to_run_with_windows.png

Ubuntu开发环境搭建

还是老样子,打开你的CLion,然后File->New Project创建一个C++ Executable项目,然后选则你的项目路径,并设置好你的项目名称,然后点击Create.

create_new_project_with_linux.png

之后配置你的项目,在左边的Project窗口打开项目目录下的CMakeLists.txt文件,添加目录包含和编译链接.

add_include_and_library_with_linux.png

由于Ubuntu下的SDL2是直接安装在系统中的,所以就不需要我们手动导入include和写全libSDL2.so路径了,但是呢,skia.so的路径还是要写全的.为了小伙伴们方便,我就直接贴出来吧.

cmake_minimum_required(VERSION 3.9)
project(SkiaConfig)

set(CMAKE_CXX_STANDARD 11)

# 设置SKIA的主目录
set(SKIA /home/var/files/skia)

# 包含目录
include_directories(
        ${SKIA}/include
        ${SKIA}/include/android
        ${SKIA}/include/atlastext
        ${SKIA}/include/c
        ${SKIA}/include/codec
        ${SKIA}/include/config
        ${SKIA}/include/core
        ${SKIA}/include/effects
        ${SKIA}/include/encode
        ${SKIA}/include/gpu
        ${SKIA}/include/gpu/gl
        ${SKIA}/include/gpu/mock
        ${SKIA}/include/gpu/mtl
        ${SKIA}/include/gpu/vk
        ${SKIA}/include/pathops
        ${SKIA}/include/ports
        ${SKIA}/include/private
        ${SKIA}/include/svg
        ${SKIA}/include/utils
        ${SKIA}/include/utils/mac
        ${SKIA}/include/views)

# 设置链接库
link_libraries(SDL2 SDL2main ${SKIA}/out/Shared/libskia.so)

add_executable(SkiaConfig main.cpp)

紧接着就是SKIA的编码工作了,感觉Linux开发是要比Windows方便很多呢.
填坑(Ubuntu)
在Ubuntu下使用Skia绘制文字需要加载系统的字体文件,不然的话文字是不会显示的.

skia_run_with_linux.png

干货分享

#include 
#include 
#include 

#ifdef _WIN32

#include 

#else

#include 

#endif

//创建RGBA结构体
struct RGBA {
    //设置Red
    Uint32 rmask = 0x00ff0000;
    //设置Green
    Uint32 gmask = 0x0000ff00;
    //设置Blue
    Uint32 bmask = 0x000000ff;
    //设置Alpha
    Uint32 amask = 0xff000000;
};

//创建SkBitmap对象并在Bitmap上绘制
SkBitmap draw(int w, int h) {
    //声明
    SkBitmap bitmap;
    //设置Bitmap的配置信息
    bitmap.setInfo(SkImageInfo::Make(w, h, kBGRA_8888_SkColorType, kOpaque_SkAlphaType));
    //转换为像素填充
    bitmap.allocPixels();
    //创建画布
    SkCanvas canvas(bitmap);
    //创建画笔
    SkPaint paint;
    //设置画布颜色
    canvas.clear(SK_ColorWHITE);
    //设置画笔抗锯齿
    paint.setAntiAlias(true);
    //设置画笔颜色(此处为红色)
    paint.setARGB(255, 255, 0, 0);
    //绘制圆形
    canvas.drawCircle(80, 80, 40, paint);
    //绘制线段
    canvas.drawLine(0, 280, w, 280, paint);
    //设置字体大小
    paint.setTextSize(60);
    //绘制字体
    canvas.drawString("Hello Skia", 300, 150, paint);
    //返回SkBitmap对象
    return bitmap;
}

//通过SDL_Surface创建SDL_Rect
SDL_Rect create_rect(SDL_Surface *surface) {
    //创建SDL_Rect对象
    SDL_Rect src = { 0, 0, surface->w, surface->h };
    //返回SDL_Rect对象
    return src;
}

//程序的入口点
int main(int args, char *argv[]) {
    //声明窗口
    SDL_Window *window;
    //声明绘图表面
    SDL_Surface *surface;
    //声明渲染器
    SDL_Renderer *renderer;
    //声明纹理
    SDL_Texture *texture;
    //声明Bitmap
    SkBitmap bitmap;
    //声明RGBA结构体
    RGBA rgba;
    //声明矩形
    SDL_Rect rect;
    //声明窗口的宽高
    int width = 800;
    int height = 480;
    //初始化SDL为视频显示
    SDL_Init(SDL_INIT_VIDEO);
    //创建窗口
    window = SDL_CreateWindow("Hello Skia", SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, width, height,
        SDL_WINDOW_RESIZABLE | SDL_WINDOW_SHOWN);
    if (window == NULL) {
        return -1;
    }
    //获取绘制后的Bitmap
    bitmap = draw(width, height);
    //通过Bitmap的像素数据创建表面
    surface = SDL_CreateRGBSurfaceFrom(bitmap.getPixels(), width, height, 32, width * 4, rgba.rmask, rgba.gmask,
        rgba.bmask, rgba.amask);
    //通过SDL_Surface创建矩形
    rect = create_rect(surface);
    //创建渲染器
    renderer = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED);
    //清理渲染器
    SDL_RenderClear(renderer);
    //创建纹理
    texture = SDL_CreateTextureFromSurface(renderer, surface);
    //辅助纹理到渲染器
    SDL_RenderCopy(renderer, texture, NULL, &rect);
    //显示到窗口
    SDL_RenderPresent(renderer);
    //延时5秒钟
    SDL_Delay(5000);
    //释放表面
    SDL_FreeSurface(surface);
    //释放纹理
    SDL_DestroyTexture(texture);
    //释放渲染器
    SDL_DestroyRenderer(renderer);
    //释放窗口
    SDL_DestroyWindow(window);
    //结束SDL
    SDL_Quit();
    //程序退出
    return 0;
}

如果遇到问题,可留言,我会在我能力范围内进行逐一解答.
好吧,这次就到这里吧,下次我们将开始深入研究Skia.