More than 3 years have passed since last update.

SkiaとC++でデスクトップアプリを作る(Windows) その2

Posted at 2020-08-28

環境

Windows 10 64bit 2004
VisualStudio2019
CMake version 3.17.20032601-MSVC_2

諸々のプロダクトは2020年8月時点の最新版です(多分)

VisualStudioのプロジェクト(CMake)でSkiaを使う

クロスプラットフォームも見据えてCMakeでプロジェクトを作ります。

VisualStudioを開き、[CMake プロジェクト]を選択して作成しましょう。この先プロジェクト名は[SkiaDesktopSample]として書きます。

GLFWの導入

Skia単体では画面出力ができないため、OpenGLのユーティリティライブラリであるGLFWの助けを借ります。

glfw.orgの右上のボタンからGLFWの最新版をダウンロードします。Zipファイルを解凍したら先程作ったプロジェクトの{ProjectRoot}/SkiaDesktopSample/third/glfw 辺りに入れておきましょう。
これによりCMakeで読み込めるようになります。

CMakeLists.txtの書き換え

CMakeListsを書いてskiaとglfwをリンクしましょう。

{ProjectRoot}/SkiaDesktopSample/CMakeLists.txt

# CMakeList.txt : SkiaDesktopSample の CMake プロジェクト。ソースを含めて、次を定義します:
# プロジェクト専用ロジックはこちらです。
#
cmake_minimum_required (VERSION 3.8)

# ソースをこのプロジェクトの実行可能ファイルに追加します。
add_executable (SkiaDesktopSample "SkiaDesktopSample.cpp" "SkiaDesktopSample.h")

# TODO: テストを追加し、必要な場合は、ターゲットをインストールします。

include_directories("C:/src/skia")
include_directories("C:/src/skia/tools/sk_app")
link_directories("C:/src/skia/out/release")
target_link_libraries(SkiaDesktopSample opengl32)
target_link_libraries(SkiaDesktopSample "C:/src/skia/out/release/skia.lib")

add_subdirectory("third/glfw")
include_directories("third/glfw/include")
target_link_libraries(SkiaDesktopSample glfw)

set_property(TARGET SkiaDesktopSample PROPERTY CXX_STANDARD 17)

include_directoriesでskiaの2箇所をincludeパスに指定します。もっと深い階層でincludeすることもできるのですが、内部ファイルのインクルードの指定の影響でこの書き方でないとコンパイルできません。
あまり行儀よくないですが、target_link_librariesにその1で作ったskia.libファイルをリンクします。openglも必要なので一緒にリンクしましょう。

またGLFWはsubdirectoryとして追加します。

Skiaは現時点ではC++20に対応していないため、C++17を指定します。

ファイルをこれで書き換え、保存してエラーが出ないことを確認してください。

コードを書く

プロジェクト作成時に作られているcppファイルを以下の内容で置き換えます。

SkiaDesktopSample.cpp

// SkiaDesktopSample.cpp : アプリケーションのエントリ ポイントを定義します。
//

#include "SkiaDesktopSample.h"

#define SK_GL

#include "GLFW/glfw3.h"
#include "include/gpu/GrBackendSurface.h"
#include "include/gpu/GrContext.h"
#include "include/gpu/gl/GrGLInterface.h"
#include "include/core/SkCanvas.h"
#include "include/core/SkColorSpace.h"
#include "include/core/SkSurface.h"
#include "include/core/SkFont.h"
#include <stdio.h>
#include <stdlib.h>
#include "include/effects/Sk2DPathEffect.h"


using namespace std;

GrContext* sContext = nullptr;
SkSurface* sSurface = nullptr;

void errorCallback(int error, const char* description) {
	fputs(description, stderr);
}

void keyCallback(GLFWwindow* window, int key, int scancode, int action, int mods) {
	if (key == GLFW_KEY_ESCAPE && action == GLFW_PRESS) {
		glfwSetWindowShouldClose(window, GL_TRUE);
	}
}

void initSkia(int w, int h) {
	GrContextOptions options;
	sContext = GrContext::MakeGL(nullptr, options).release();

	GrGLFramebufferInfo framebufferInfo;
	framebufferInfo.fFBOID = 0;
	framebufferInfo.fFormat = GL_RGBA8;

	SkColorType colorType;
	colorType = kRGBA_8888_SkColorType;
	GrBackendRenderTarget backendRenderTarget(w, h, 0, 0, framebufferInfo);

	sSurface = SkSurface::MakeFromBackendRenderTarget(
		sContext, backendRenderTarget, kBottomLeft_GrSurfaceOrigin, colorType, nullptr, nullptr
	).release();
	if (sSurface == nullptr) abort();
}

void cleanupSkia() {
	delete sSurface;
	delete sContext;
}

const int kWidth = 960;
const int kHeight = 640;

int main(int argc, char* argv[])
{
	cout << "Hello CMake." << endl;
	GLFWwindow* window;
	glfwSetErrorCallback(errorCallback);
	if (!glfwInit()) {
		exit(EXIT_FAILURE);
	}

	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 2);
	glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

	glfwWindowHint(GLFW_STENCIL_BITS, 0);
	glfwWindowHint(GLFW_DEPTH_BITS, 0);

	window = glfwCreateWindow(kWidth, kHeight, "Simple Example", NULL, NULL);
	if (!window) {
		glfwTerminate();
		exit(EXIT_FAILURE);
	}
	glfwMakeContextCurrent(window);

	initSkia(kWidth, kHeight);

	glfwSwapInterval(1);
	glfwSetKeyCallback(window, keyCallback);

	SkCanvas* canvas = sSurface->getCanvas();

	const char message[] = "Hello, Skia!";

	while (!glfwWindowShouldClose(window)) {
		glfwPollEvents();
		SkPaint paint;
		canvas->clear(SK_ColorWHITE);
		paint.setColor(SK_ColorBLUE);
		canvas->drawRect({ 100,200,300,500 }, paint);
		paint.setColor(SK_ColorRED);
		SkFont font;
		font.setSubpixel(true);
		font.setSize(72);
		canvas->drawSimpleText(message, strlen(message), SkTextEncoding::kUTF8, kWidth / 2, kHeight / 2, font, paint);
		sContext->flush();

		glfwSwapBuffers(window);
	}

	cleanupSkia();
	glfwDestroyWindow(window);
	glfwTerminate();
	exit(EXIT_SUCCESS);
	return 0;
}

CMakeの設定を変更

少し設定を弄ります。[プロジェクト]>[SkiaDesktopSampleのCMakeの設定]>[CMake変数とキャッシュ]で、[高度な変数を表示]にチェックを入れます。
すると複数の変数が表示されるのでCMAKE_CXX_FLAGS_DEBUGを探し出し、最初の/MDdを/MTdに変更し、保存します。