前言
首先呢,在搭建開(kāi)發(fā)環(huán)境之前,請(qǐng)確保你已經(jīng)編譯出了對(duì)應(yīng)平臺(tái)的library :
Windows : skia.dll , skia.dll.lib
Linux : libskia.a , libskia.so
如果沒(méi)有編譯出來(lái)或者還不知道怎么編譯,請(qǐng)參考我的上一篇文章,根據(jù)你需要的平臺(tái)下載源碼進(jìn)行編譯:
[圖形引擎Skia之一]源碼下載與編譯(Windows)
[圖形引擎Skia之一]源碼下載與編譯(Ubuntu)
為了各位方便,這里提供編譯好的 Windows x86 及 Windows x64 版本的 skia 相關(guān)開(kāi)發(fā)文件
百度網(wǎng)盤
準(zhǔn)備工作
首先呢,Skia就是一個(gè)單純的2D圖形引擎而已,他并不像Cairo那樣All In One,所以呢,并不包含窗體,事件,線程,UI更新等功能,但是我們開(kāi)發(fā)應(yīng)用程序則需要這些功能,那么怎么辦呢?當(dāng)然有辦法啦,我的解決辦法就是使用SDL2來(lái)承載Skia,實(shí)現(xiàn)跨平臺(tái)的功能,并解決我們的窗體創(chuàng)建,事件,線程,UI更新等.關(guān)于SDL2是什么,我這里就不多說(shuō)了,不懂的小伙伴自行百(gu)度(ge).
既然我們要開(kāi)發(fā)應(yīng)用程序,那么就需要搭建開(kāi)發(fā)環(huán)境啦,對(duì)應(yīng)的平臺(tái)選擇對(duì)應(yīng)的開(kāi)發(fā)環(huán)境,我的開(kāi)發(fā)環(huán)境如下,各位小伙伴們可以參考參考:
Windows :
桌面環(huán)境 : Windows 10 X64 Professional
開(kāi)發(fā)環(huán)境 : Visual Studio 2017 Enterprise
依賴環(huán)境 : SDL2 , Skia
Ubuntu :
桌面環(huán)境 : Ubuntu 16.04 X64 STL
開(kāi)發(fā)環(huán)境 : JetBrains CLion 2017.3.3
依賴環(huán)境 : 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開(kāi)發(fā)環(huán)境搭建
首先呢,打開(kāi)你的Visual Studio,然后新建一個(gè)項(xiàng)目,選擇Visual C++,選擇空項(xiàng)目,并填上你的應(yīng)用名稱,選擇好你的創(chuàng)建路徑.
create_new_project_with_windows.png
然后確定,等待項(xiàng)目創(chuàng)建完成.創(chuàng)建完成之后,如果你編譯的平臺(tái)是x64,則需要切換構(gòu)建的平臺(tái),不然鏈接的時(shí)候會(huì)報(bào)錯(cuò).select_platform_with_windows.png
緊接著,右鍵創(chuàng)建的項(xiàng)目,注意,是項(xiàng)目,不是解決方案,然后選擇屬性.config_project_with_windows.png
在屬性窗口的左邊選擇配置屬性->VC++ 目錄,找到包含目錄并點(diǎn)擊編輯.add_include_files_with_windows.png
添加skia源碼目錄下的include文件夾以及include目錄下的所有文件夾,別忘了還有SDL2的include文件夾add_include_directory_with_windows.png
然后點(diǎn)擊確定,之后再屬性窗口左邊找到連接器選項(xiàng),選擇常規(guī),并點(diǎn)擊編輯附加目錄庫(kù).add_library_directory_with_windows.png
然后添加skia.dll.lib所在的目錄和SDL2.lib所在的目錄,注意選擇與你的構(gòu)建平臺(tái)對(duì)應(yīng)的目錄.add_library_directory_2_with_windows.png
之后點(diǎn)擊確定,選擇屬性窗口左邊的輸入,并點(diǎn)擊編輯附加依賴項(xiàng),添加skia.dll.lib, SDL2.lib, SDL2main.libadd_library_file_with_windows.png
然后點(diǎn)擊確定,在屬性窗口點(diǎn)擊應(yīng)用并點(diǎn)擊確定關(guān)閉屬性窗口.
之后就是你的編碼工作了,我會(huì)在本文末尾貼上此處的代碼.skia_run_with_windows.png
填坑(Windows)
1.如果出現(xiàn) LNK156:必須定義入口點(diǎn) 這類錯(cuò)誤,請(qǐng)右鍵項(xiàng)目->屬性->連接器->系統(tǒng)->子系統(tǒng)->選擇 窗口 (/SUBSYSTEM:WINDOWS) 然后確定即可.not_found_main_method.pngselect_system_type_with_windows.png
2.如果出現(xiàn)SDL2.dll未找到的錯(cuò)誤或者skia.dll未找到的錯(cuò)誤,則需要將skia.dll和SDL2.dll復(fù)制到Visual Studio的編譯輸出目錄即可.not_found_SDL2_dll.png
not_found_skia_dll.pngcopy_library_to_run_with_windows.png
Ubuntu開(kāi)發(fā)環(huán)境搭建
還是老樣子,打開(kāi)你的CLion,然后File->New Project創(chuàng)建一個(gè)C++ Executable項(xiàng)目,然后選則你的項(xiàng)目路徑,并設(shè)置好你的項(xiàng)目名稱,然后點(diǎn)擊Create.create_new_project_with_linux.png
之后配置你的項(xiàng)目,在左邊的Project窗口打開(kāi)項(xiàng)目目錄下的CMakeLists.txt文件,添加目錄包含和編譯鏈接.add_include_and_library_with_linux.png
由于Ubuntu下的SDL2是直接安裝在系統(tǒng)中的,所以就不需要我們手動(dòng)導(dǎo)入include和寫全libSDL2.so路徑了,但是呢,skia.so的路徑還是要寫全的.為了小伙伴們方便,我就直接貼出來(lái)吧.cmake_minimum_required(VERSION 3.9) project(SkiaConfig) set(CMAKE_CXX_STANDARD 11) # 設(shè)置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) # 設(shè)置鏈接庫(kù) link_libraries(SDL2 SDL2main ${SKIA}/out/Shared/libskia.so) add_executable(SkiaConfig main.cpp)緊接著就是SKIA的編碼工作了,感覺(jué)Linux開(kāi)發(fā)是要比Windows方便很多呢.
填坑(Ubuntu)
在Ubuntu下使用Skia繪制文字需要加載系統(tǒng)的字體文件,不然的話文字是不會(huì)顯示的.skia_run_with_linux.png
干貨分享
#include <SkBitmap.h>
#include <core/SkCanvas.h>
#include <core/SkTypeface.h>
#ifdef _WIN32
#include <SDL.h>
#else
#include <SDL2/SDL.h>
#endif
//創(chuàng)建RGBA結(jié)構(gòu)體
struct RGBA {
//設(shè)置Red
Uint32 rmask = 0x00ff0000;
//設(shè)置Green
Uint32 gmask = 0x0000ff00;
//設(shè)置Blue
Uint32 bmask = 0x000000ff;
//設(shè)置Alpha
Uint32 amask = 0xff000000;
};
//創(chuàng)建SkBitmap對(duì)象并在Bitmap上繪制
SkBitmap draw(int w, int h) {
//聲明
SkBitmap bitmap;
//設(shè)置Bitmap的配置信息
bitmap.setInfo(SkImageInfo::Make(w, h, kBGRA_8888_SkColorType, kOpaque_SkAlphaType));
//轉(zhuǎn)換為像素填充
bitmap.allocPixels();
//創(chuàng)建畫布
SkCanvas canvas(bitmap);
//創(chuàng)建畫筆
SkPaint paint;
//設(shè)置畫布顏色
canvas.clear(SK_ColorWHITE);
//設(shè)置畫筆抗鋸齒
paint.setAntiAlias(true);
//設(shè)置畫筆顏色(此處為紅色)
paint.setARGB(255, 255, 0, 0);
//繪制圓形
canvas.drawCircle(80, 80, 40, paint);
//繪制線段
canvas.drawLine(0, 280, w, 280, paint);
//設(shè)置字體大小
paint.setTextSize(60);
//繪制字體
canvas.drawString("Hello Skia", 300, 150, paint);
//返回SkBitmap對(duì)象
return bitmap;
}
//通過(guò)SDL_Surface創(chuàng)建SDL_Rect
SDL_Rect create_rect(SDL_Surface *surface) {
//創(chuàng)建SDL_Rect對(duì)象
SDL_Rect src = { 0, 0, surface->w, surface->h };
//返回SDL_Rect對(duì)象
return src;
}
//程序的入口點(diǎn)
int main(int args, char *argv[]) {
//聲明窗口
SDL_Window *window;
//聲明繪圖表面
SDL_Surface *surface;
//聲明渲染器
SDL_Renderer *renderer;
//聲明紋理
SDL_Texture *texture;
//聲明Bitmap
SkBitmap bitmap;
//聲明RGBA結(jié)構(gòu)體
RGBA rgba;
//聲明矩形
SDL_Rect rect;
//聲明窗口的寬高
int width = 800;
int height = 480;
//初始化SDL為視頻顯示
SDL_Init(SDL_INIT_VIDEO);
//創(chuàng)建窗口
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);
//通過(guò)Bitmap的像素?cái)?shù)據(jù)創(chuàng)建表面
surface = SDL_CreateRGBSurfaceFrom(bitmap.getPixels(), width, height, 32, width * 4, rgba.rmask, rgba.gmask,
rgba.bmask, rgba.amask);
//通過(guò)SDL_Surface創(chuàng)建矩形
rect = create_rect(surface);
//創(chuàng)建渲染器
renderer = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED);
//清理渲染器
SDL_RenderClear(renderer);
//創(chuàng)建紋理
texture = SDL_CreateTextureFromSurface(renderer, surface);
//輔助紋理到渲染器
SDL_RenderCopy(renderer, texture, NULL, &rect);
//顯示到窗口
SDL_RenderPresent(renderer);
//延時(shí)5秒鐘
SDL_Delay(5000);
//釋放表面
SDL_FreeSurface(surface);
//釋放紋理
SDL_DestroyTexture(texture);
//釋放渲染器
SDL_DestroyRenderer(renderer);
//釋放窗口
SDL_DestroyWindow(window);
//結(jié)束SDL
SDL_Quit();
//程序退出
return 0;
}
如果遇到問(wèn)題,可留言,我會(huì)在我能力范圍內(nèi)進(jìn)行逐一解答.
好吧,這次就到這里吧,下次我們將開(kāi)始深入研究Skia.
