34

レンダリングされたすべてのグラフィックスを完全に透明な背景にレンダリングできる WebKit へのパッチの可能性を評価しようとしています。

目的の効果は、背景をまったく使用せずに Web コンテンツをレンダリングすることです。デスクトップ (またはブラウザー ウィンドウの背後に表示されるもの) の上に浮かんでいるように見える必要があります。

アプリがこれを行うのを見た人はいますか？(可能な端末エミュレーターをいくつか思いつきます。) 誰かが WebKit (またはおそらく Gecko?) 内で作業したことがある場合、これを行うことが可能だと思いますか?

更新: Mac OSX ダッシュボード ウィジェットがまさにこの手法を使用していることに気付きました。したがって、これは可能でなければなりません。

更新 2: Linux で WebKit をコンパイルしたところ、構成オプションに次のものが含まれていることに気付きました。

--enable-dashboard-support
enable Dashboard support default=yes

私は近づいています。誰でも助けることができますか？

更新 3:さまざまな関連するメーリング リストの投稿で、これに関する参照を引き続き見つけています。

4

5 に答える 5

30

解決しました！

進行中の調査、フォーラムおよびソース コード リポジトリの精査を通じて、libwebkit と標準の compiz デスクトップ (合成機能を備えた Xorg デスクトップならどれでもよい) のみを使用して、これを達成するために必要な手順をまとめました。

現在の libwebkit (1.1.10-SVN) には、Ubuntu PPA があります。

deb http://ppa.launchpad.net/webkit-team/ppa/ubuntu jaunty main
deb-src http://ppa.launchpad.net/webkit-team/ppa/ubuntu jaunty main

コードに関する限り、キーは呼び出しwebkit_web_view_set_transparentです。

もちろん、それを実行しているシステムには、対応するグラフィックス カード (intel、radeon、または nvidia) があり、合成ウィンドウ マネージャー (Compiz など) が実行されている必要があります。

最後に、実際に透明性を確認するには、表示しているコンテンツで CSS3 を使用して透明な背景を設定する必要があります。そうしないと、完全に不透明なままになります。

次のように簡単です。

BODY { background-color: rgba(0,0,0,0); }

これは、透過性をサポートする、可能な限り単純な Webkit ブラウザー アプリの完全なサンプルです。

#include <gtk/gtk.h>
#include <webkit/webkit.h>

static void destroy_cb(GtkWidget* widget, gpointer data) {
  gtk_main_quit();
}

int main(int argc, char* argv[]) {
  gtk_init(&argc, &argv);

  if(!g_thread_supported())
    g_thread_init(NULL);

  // Create a Window, set colormap to RGBA
  GtkWidget* window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  GdkScreen *screen = gtk_widget_get_screen(window);
  GdkColormap *rgba = gdk_screen_get_rgba_colormap (screen);

  if (rgba && gdk_screen_is_composited (screen)) {
    gtk_widget_set_default_colormap(rgba);
    gtk_widget_set_colormap(GTK_WIDGET(window), rgba);
  }

  gtk_window_set_default_size(GTK_WINDOW(window), 800, 800);
  g_signal_connect(window, "destroy", G_CALLBACK(destroy_cb), NULL);

  // Optional: for dashboard style borderless windows
  gtk_window_set_decorated(GTK_WINDOW(window), FALSE);


  // Create a WebView, set it transparent, add it to the window
  WebKitWebView* web_view = web_view = WEBKIT_WEB_VIEW(webkit_web_view_new());
  webkit_web_view_set_transparent(web_view, TRUE);
  gtk_container_add (GTK_CONTAINER(window), GTK_WIDGET(web_view));

  // Load a default page
  webkit_web_view_load_uri(web_view, "http://stackoverflow.com/");

  // Show it and continue running until the window closes
  gtk_widget_grab_focus(GTK_WIDGET(web_view));
  gtk_widget_show_all(window);
  gtk_main();
  return 0;
}

スクリーンショット！

于 2009-07-15T19:26:31.757 に答える
2

Safari 1.3 および 2 にはdefaults write com.apple.Safari IncludeDebugMenu 1、「透明なウィンドウを使用」オプションを含む非表示のデバッグ メニュー (ターミナル経由で呼び出される) がありました。

ただし、これが WebKit のものなのか Safari のものなのかはわかりません。

(Safari 3 では、デバッグ メニューは、透過ウィンドウ オプションを持たない「開発」メニュー ([設定] > [詳細設定] で有効にする) に置き換えられたようです。)

于 2009-05-09T11:34:02.863 に答える
1

基本的には、ウィンドウマネージャーに送信するARGB色空間を設定する必要があります。明らかに、合成をサポートするウィンドウマネージャーだけがこれを利用できます。

ScreenletやCompizの開発者と話をしたいと思うかもしれませんが、彼らはもっと助けてくれるはずです。

于 2009-04-26T12:59:26.693 に答える
1

単一のスクリーンショットに対して、非常に簡単に実行できる新しいソリューションがあります。これは、phantom.js ライブラリで node.js を使用しています。

  1. node.js をインストールする
  2. コンソール/ターミナルで「npm install -g phantomjs」を実行します

  3. 以下をscript.jsとして保存し、コンソール「phantomjs script.js」から実行します

    var page = require('webpage').create();
page.viewportSize = { width: 1920, height: 1500 };
page.open("http://www.theWebYouWantToRender");
page.onLoadFinished = function(status) {
    page.evaluate(function() {
        document.body.style.background = 'transparent';
    });

    page.render('render.png');
    phantom.exit();
};
  4. 利益？：） 楽しい
于 2016-03-29T15:27:45.633 に答える