背景を透過し、かつ不定形なGUIを描画する方法について質問です。
行いたいこと : Windowsのイルカや、PythonのAnacondaの起動画面のようにウィンドウを持たず、かつ不定形なGUIをLinux上で作成したい
分からないこと: そもそもLinux上で可能なのか、またどのようなライブラリで実現できるのか
また、十分条件ですがOpenGLで3D描画をできるとなお良いです。
何かご存知の方、ご回答いただけるとありがたいです。
GTK+でできます。
#include <gtk/gtk.h>
#include <cairo.h>
#include <math.h>
gboolean on_draw(GtkWidget *widget, cairo_t *cr, gpointer user_data)
{
cairo_save(cr);
/* GTK+の低レイヤーのcairoで、アルファレンダリングする */
cairo_scale(cr, gtk_widget_get_allocated_width(widget), gtk_widget_get_allocated_height(widget));
cairo_set_source_rgba(cr, 0.0, 1.0, 0.0, 0.5);
cairo_arc(cr, 0.5, 0.5, 0.5, 0.0, M_PI * 2.0);
cairo_fill(cr);
cairo_restore(cr);
return TRUE;
}
int main(int argc, char *argv[])
{
GtkWidget *window;
gtk_init(&argc, &argv);
window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
gtk_window_set_default_size(GTK_WINDOW(window), 400, 300);
/* デフォルトの背景描画をしない */
gtk_widget_set_app_paintable(window, TRUE);
/* ウィンドウ装飾(タイトルなど)を非表示 */
gtk_window_set_decorated(GTK_WINDOW(window), FALSE);
/* RGBAレンダリングを有効に */
gtk_widget_set_visual(window, gdk_screen_get_rgba_visual(gdk_screen_get_default()));
g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL);
g_signal_connect(G_OBJECT(window), "draw", G_CALLBACK(on_draw), NULL);
gtk_widget_show(window);
gtk_main();
return 0;
}
GtkGLAreaを使えば、GTK+でOpenGLレンダリングを行う事ができます。
#include <GL/gl.h>
#include <gtk/gtk.h>
gboolean on_render(GtkGLArea *gl_area, GdkGLContext *context, gpointer user_data)
{
glClearColor(0.2f, 0.2f, 0.2f, 0.5f);
glClear(GL_COLOR_BUFFER_BIT);
#if 0
glDisable(GL_DEPTH_TEST);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
glDisable(GL_CULL_FACE);
glBegin(GL_TRIANGLE_STRIP);
glColor4f(0.0f, 1.0f, 0.0f, 0.5f);
glVertex3f( 0.9f, 0.9f, 0.5f);
glColor4f(0.0f, 1.0f, 0.0f, 0.5f);
glVertex3f( 0.9f, -0.9f, 0.5f);
glColor4f(0.0f, 1.0f, 0.0f, 0.5f);
glVertex3f(-0.9f, -0.9f, 0.5f);
glEnd();
#endif
glFlush();
return FALSE;
}
int main(int argc, char *argv[])
{
GtkWidget *window;
GtkWidget *gl_area;
gtk_init(&argc, &argv);
window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
gtk_window_set_default_size(GTK_WINDOW(window), 400, 300);
gtk_widget_set_app_paintable(window, TRUE);
gtk_window_set_decorated(GTK_WINDOW(window), FALSE);
gtk_widget_set_visual(window, gdk_screen_get_rgba_visual(gdk_screen_get_default()));
g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL);
gl_area = gtk_gl_area_new();
gtk_gl_area_set_has_alpha(GTK_GL_AREA(gl_area), TRUE);
gtk_widget_show(gl_area);
gtk_container_add(GTK_CONTAINER(window), gl_area);
g_signal_connect(G_OBJECT(gl_area), "render", G_CALLBACK(on_render), NULL);
gtk_widget_show(window);
gtk_main();
return 0;
}
残念ながらGtkGLAreaは使った事がなく、三角形をレンダリングするところまではできませんでしたが、背景色のアルファを0.5にしてクリアすると透けて表示されるので、ちゃんとレンダリングすれば非矩形表示もできるはずです。
以前同じ事をQtでやろうとしたけど、結局やり方がわからなかった。
誰かQtで回答してくれないかなぁボソ
解決済みですけど、思い出した事があったので、追記します。
ご存知かもしれませんが、GLFWというライブラリがあります。
OpenGLのテストコードを書くのに重宝するのですが、こいつが結構高機能で、もしかしたらそんな機能もあるんじゃないかな、と思ってドキュメントを眺めていたら、見つけました。
#include <GL/gl.h>
#include <GLFW/glfw3.h>
#include <cstdio>
int main()
{
if (!glfwInit()) {
std::fprintf(stderr, "%s(%d): failed to initialize GLFW.\n", __FILE__, __LINE__);
return 1;
}
// ウィンドウ装飾を非表示
glfwWindowHint(GLFW_DECORATED, GLFW_FALSE);
// フレームバッファを半透明表示
glfwWindowHint(GLFW_TRANSPARENT_FRAMEBUFFER, GLFW_TRUE);
GLFWwindow *window = glfwCreateWindow(400, 300, "Test", NULL, NULL);
glfwMakeContextCurrent(window);
while (!glfwWindowShouldClose(window)) {
// アルファも含め、全てのカラーをクリア
glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
glClear(GL_COLOR_BUFFER_BIT);
glDisable(GL_DEPTH_TEST);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
glDisable(GL_CULL_FACE);
glBegin(GL_TRIANGLES);
glColor4f(0.0f, 1.0f, 0.0f, 1.0f);
glVertex3f( 0.5f, 0.5f, 0.0f);
glColor4f(0.0f, 1.0f, 0.0f, 1.0f);
glVertex3f(-0.5f, -0.5f, 0.0f);
glColor4f(0.0f, 1.0f, 0.0f, 1.0f);
glVertex3f( 0.5f, -0.5f, 0.0f);
glEnd();
glfwSwapBuffers(window);
glfwPollEvents();
}
glfwTerminate();
return 0;
}
ただ、残念な事に、上記で使用しているGLFW_TRANSPARENT_FRAMEBUFFER
はバージョン3.3から追加された機能で、リリースされたのが昨日なんですよね。
(なんちゅうタイミングだ)
だから、使うのであればディストリビューションが配布しているものは使用せず、自分でソースコードを持ってきてビルドする必要があると思います。
ただ、OpenGLを使って、というのであればこれが一番簡単でベストかなぁと思います。
JavaだとJava7以降は単独でできるようです。
Java SE 7: 非矩形ウィンドウと半透明ウィンドウのさらなる応用
YouTube/ニコニコ動画で最小限の表示の仕組みを解説しているものがあります。
【Java】デスクトップマスコットをなるべく簡単に【プログラミング】YouTube / 同ニコニコ動画
項目をまとめると以下になると考えられます。
これはJavaに限らず、どの言語やライブラリでも同じでしょう。
アニメーションは無いですが、UIも含めたもう少し詳しい例が以下になります。
主な説明はProcessingという言語のものですが、Javaのソースも掲載されています。
非矩形ウィンドウを表示するには
Simple DirectMedia Layer という OpenGL にかぶせて使うライブラリがあって、クロスプラットフォームで使えるそうです。
紬ちゃんマスコット SDL2.0編 / SDL2で非矩形の画像ビューアを作成 / D言語+SDL2で非矩形ウィンドウを作成する
SDL2 and 3D Rendering / Is 3d game development advantageous/possible in SDL2?
OpenGL系ではこんな記事もあります。
OpenGL(GLES2.0)のアルファブレンドで透過処理した画像が黒っぽくなる。
How to make an OpenGL rendering context with transparent background? / Make transparency not show what is behind the window in opengl with c++
Option for transparent windows #197
GLSC3DProject/GLSC3D / GLSC3D (Ver. 3.0.0) Manual
Qt系では、以下のような記事があります。
Pyside の透過PNG表示のサンプル
月の杜工房 - Qt ウィンドウスタイル
Frameless and transparent window qt5
frameless windows with qt5 (qml)
Qt5 & QtQuick2 - transparent main window
QQuickWindow transparent
widget透過のまとめ
他にこんなのも。
Kivyで非矩形ウィンドウ
GTK+で非矩形ウィンドウを表示する
デスクトップマスコット MaCoPiX
そしてこれらみんなのルーツとも言えそうな、neko もありますね。
今回の参考にはならないかもしれませんが。
Neko (ソフトウェア) - ウィキペディア
なつかしのoneko on Fedora 26
猫がマウスカーソルを追いかけるソフト oneko
Linux / Unix Desktop Fun: Cat And Mouse Chase All Over Your Screen
kazunari03/oneko-linux
oneko-sakura
Qtで作ってみました。
始めに、次のような画像を用意します。周囲の部分は透明にして、透過PNG形式で保存します。
Qt Creatorで、Qt GUIアプリのプロジェクトを新規作成します。
メニューバーとステータスバーは不要なので削除します。
画像サイズに合わせてgeometryの幅と高さを設定し、sizePolicyをFixedにします。
必要に応じてボタンなどのGUI部品を配置します。
アプリケーションにリソースファイルを追加し、画像ファイルを登録します。
MainWindowのコンストラクタで、フレーム無しで、ウィンドウを透明にする設定を記述します。
setWindowFlags(Qt::Window | Qt::FramelessWindowHint);
setAttribute(Qt::WA_NoSystemBackground);
setAttribute(Qt::WA_TranslucentBackground);
setAutoFillBackground(true);
MainWindowのヘッダファイルにQImageオブジェクトをメンバ変数として持たせ、そこに画像を読み込ませます。
bg_image_.load(":/image/bg.png");
bg_image_ = bg_image_.convertToFormat(QImage::Format_RGBA8888);
int w = bg_image_.width();
int h = bg_image_.height();
setFixedSize(w, h);
Windowsでは不要ですが、LinuxとmacOSでは透過部分を指定するためのマスクビットマップが必要ですので、生成して登録します。
QImage maskimage(w, h, QImage::Format_Grayscale8);
for (int y = 0; y < h; y++) {
uint8_t const *src = bg_image_.scanLine(y);
uint8_t *dst = maskimage.scanLine(y);
for (int x = 0; x < w; x++) {
dst[x] = src[x * 4 + 3] < 128 ? 255 : 0;
}
}
setMask(QBitmap::fromImage(maskimage));
paintEventで画像を描画します。
QPainter pr(this);
pr.drawImage(0, 0, bg_image_);
それ以外は普通のQtアプリ開発と同じです。
OpenGLは使ったことはありませんが、QGLWidgetかQOpenGLWidgetを使うとできるかもしれません。ただし、透過部分を指定するビットマップの生成が面倒そうです。