wxpythonでウィンドウ枠を透過させて手前に画像やgifを表示させたい。

Question

前提・実現したいこと

以前の質問wxpythonで透過gifと背景gifを同時に重ねて再生表示する方法と似ている質問になります。以下のgif動画の一番下にある箇所をなくし、ウィンドウそのものを透過させたいです。

開発環境

win10
python3.7
wxpython

発生している問題・エラーメッセージ

挑戦した方法はselfをSetTransparent効果にさせて透明化する方法です。
問題としては上の桜吹雪index.gifも透明になってしまい、全体的に透明化してしまいました。

該当のソースコード

import wx
import wx.adv


def callLaterTimedGen(gen, done=None, stop=None):
    def next_gen():
        interval = next(gen, stop)
        if interval is not stop:
            wx.CallLater(interval, next_gen)
    wx.CallAfter(next_gen)
    return gen


class MyFrame(wx.Frame):
   def __init__(self, parent=None, *args, **kw):
      super().__init__(parent, *args, **kw)

      self.menubar = wx.MenuBar(wx.MB_DOCKABLE)
      self.filem = wx.Menu()
      self.filem.Append(wx.ID_EXIT, '&Transparency')
      
      self.menubar.Append(self.filem, '&File')
      self.SetMenuBar(self.menubar)
      self.Bind(wx.EVT_MENU, self.OnTrans)

      self.bmp1 = None
      self.bmp2 = None
      self.Bind(wx.EVT_PAINT, self.OnPaint)
      self.Bind(wx.EVT_TIMER, lambda _: self.Refresh())

      self.timer = wx.Timer(self)
      self.timer.Start(200)

      # panel = wx.Panel(self)

      # self.gen1 = callLaterTimedGen(gifAnimation("unnamed.gif", self.SetBitmap1))
      self.gen2 = callLaterTimedGen(gifAnimation("index.gif", self.SetBitmap2, useMask=(0, 0, 0)))

      #ボタンの作成
      self.Button1=wx.Button(self, label="exit",pos=(20,100))
      self.Button2=wx.Button(self, label="print",pos=(20,150))

      #ボタンを割り当て
      self.Bind(wx.EVT_BUTTON, self.close, self.Button1)
      self.Bind(wx.EVT_BUTTON, self.printer, self.Button2)

      self.Show(True)

      self.transp = False
      wx.CallLater(250, self.OnTrans, None)

   def OnTrans(self, event):
      if self.transp == False:
         self.SetTransparent(30)
         self.transp = True
      else:
         self.SetTransparent(255)
         self.transp = False
   
   def close(self,event):
      self.Close(True)

   def printer(self, event):
      print("Button2")
      self.gen1.close()
      self.gen1 = callLaterTimedGen(gifAnimation("someiyoshino2.gif", self.SetBitmap1))

   def SetBitmap1(self, bmp):
      self.bmp1 = bmp

   def SetBitmap2(self, bmp):
      self.bmp2 = bmp

   def OnPaint(self, event):
      dc = wx.PaintDC(self)
      if self.bmp1:
         # 背景 (mask: False)
         dc.DrawBitmap(self.bmp1, 0, 0, False)
      if self.bmp2:
         # 透過 (mask: True)
         dc.DrawBitmap(self.bmp2, 0, 0, True)


def gifAnimation(filepath, setBitmap, useMask=None):
   anim = wx.adv.Animation(filepath)
   # self.transp = False
   from itertools import cycle
   for idx in cycle(range(anim.GetFrameCount())):
      print('idx', idx)
      delay = anim.GetDelay(idx)/10
      print('delay', delay)
      frame = anim.GetFrame(idx)
      print('frame', frame)
      if useMask:
         frame.SetMaskColour(*useMask)
      yield delay
      setBitmap(frame.ConvertToBitmap())


def main():
    app = wx.App()
    win = MyFrame(None, wx.ID_ANY, "ウィンドウ透過GIF重ね合わせテスト", size = (600,400))
    win.Centre()
    win.Show()

    app.MainLoop()


if __name__ == '__main__':
    main()

共有ファイル

夜桜index.gifの配置場所(google drive)

試したこと

この問題に対して以下のサイトなどを参照しました。

wxPython - 透明/アルファの背景を描画する（カスタムウィジェット/パネル用）
⇒目的のものと違っているようでした。

wxpythonはパネル上に矩形を描画しません
⇒以下のような確かにウィンドウを透明化した上に描画していますが、gif動画となるとPaintというわけにはいかないため、表示できませんでした。

コードは以下です。

import wx 
from PIL import Image, ImageDraw
import wx.adv
def callLaterTimedGen(gen, done=None, stop=None):
    def next_gen():
        interval = next(gen, stop)
        if interval is not stop:
            wx.CallLater(interval, next_gen)
    wx.CallAfter(next_gen)
    return gen

class Frame(wx.Frame): 
    def __init__(self):

        super(Frame, self).__init__(None) 
        self.Bind(wx.EVT_ERASE_BACKGROUND, self.OnEraseBackground) 
        self.Bind(wx.EVT_LEFT_DOWN, self.OnLeftDown) 
        self.Bind(wx.EVT_KEY_DOWN, self.OnKeyDown) 
        self.Bind(wx.EVT_PAINT, self.OnPaint) 
    def OnEraseBackground(self, event): 
        pass # do nothing 
    def OnLeftDown(self, event): 
        print(event.GetPosition())
    def OnKeyDown(self, event): 
        if event.GetKeyCode() == wx.WXK_ESCAPE: 
            self.Close() 
        else: 
            event.Skip() 

    def SetBitmap2(self, bmp):
        self.bmp2 = bmp
    def OnPaint(self, event): 
        dc = wx.PaintDC(self) 
        dc.SetPen(wx.Pen('#d4d4d4')) 
        dc.SetBrush(wx.Brush('#c56c00')) 
        dc.DrawRectangle(10, 15, 90, 60)
        print("Button2")
        self.gen2 = callLaterTimedGen(gifAnimation("someiyoshino2.gif", self.SetBitmap2, useMask=(0, 0, 0)))
 
        self.Show(True)
    def printer(self, event):
        print("Button2")
        self.gen1.close()
        self.gen1 = callLaterTimedGen(gifAnimation("someiyoshino2.gif", self.SetBitmap1))

def gifAnimation(filepath, setBitmap, useMask=None):
   anim = wx.adv.Animation(filepath)

   from itertools import cycle
   for idx in cycle(range(anim.GetFrameCount())):
      print('idx', idx)
      delay = anim.GetDelay(idx)/10
      print('delay', delay)
      frame = anim.GetFrame(idx)
      print('frame', frame)
      if useMask:
         frame.SetMaskColour(*useMask)
      yield delay
      setBitmap(frame.ConvertToBitmap())

if __name__ == '__main__': 
    app = wx.PySimpleApp() 
    frame = Frame() 
    frame.ShowFullScreen(True) 
    app.MainLoop()

selfごと透過しても目的は達成できなく、paintDCを使っても描画のみでgifを表示することができませんでした。
いっそのこと枠全体を.コンマでキャプチャして枠へ表示するという複雑な作りも考えましたができませんでした。２つのレイヤーを持たせるなどの方法もあるのでしょうか。

知見ある方アドバイス頂けないでしょうか。よろしくお願い致します。

Comments

[teamikl]

ウィンドウそのものを透過させたいというと、SetTransparent だと思いました。

どのような透過なのかがイメージできないのですが、
背景画像の特定の色のみを透過ということですか？
例えば、白色の部分のみ後ろが透けて、ウィンドウ内からデスクトップの背景がみえるような。

[dendenmushi]

teamiklさんありがとうございます。イメージとしてはレイヤーが２つで上のgifは通常色で桜が舞い、その下のレイヤーは全て透明で枠だけあり（枠ありなしこだわっていません）、デスクトップが見れる状態です。
白色の部分というより、gif以外全て透過しているイメージです。

Answer 1

既存のコードとの兼ね合いがどうなるかわかりませんが、

半透明ではなく、特定の部分のみを透過するといった場合は、
「透過ウィンドウ」ではなく「非矩形ウィンドウ」にします。

OnPaint 内で、

• bitmap の透過したい色を mask に設定
• RegionFromBitmap で目的の Region を得る
• Region を設定 SetClippingRegionAsRegion

　
Frame に対して非短形ウィンドウは SetShape で設定できますが、
毎フレーム形が変わるため、OnPaintイベント 内で Device Context に対して設定します。

ひとつ、心配なのは、アニメーションだという点。

毎フレーム処理していてはアニメーション速度に影響し遅くならないかという懸念があります。
GIFのフレーム数次第では事前計算しておく等も対策として考えられますが、
この点に関しては、実際に試したことはないのでわかりません。

---

他の解決策としては、GUIとは別に
透過画像を wx.ClientDC や wx.ScreenDC に直接描画する方法も考えられます。

この場合、ウィンドウは枠無しウィンドウにしてください。
描画する座標をウィンドウ位置からの相対的に求めることで、
擬似的に透過したウィンドウっぽくなります。

但し、この方法の場合、画像が描画されてる部分はマウスイベントやフォーカスを持てないので注意。
（スクリーンショットを取るブログラムで、ウィンドウのみを選択した場合に
スクリーンへの描画は含まれない等、いくつか弊害が考えられます）
追記: ScreenDC ではなく ClientDC なら大丈夫かもしれない（未検証）

現状のコードを直接変更してテストするのは、問題が複雑化するのでお勧めしません。
まずは各項目について単体のプログラムを書いて動作を確かめてみましょう。

• 非短形ウィンドウ

　・frame.SetShape(region)
・dc.SetClippingRegionAsRegion(region)

• wx.ClientDC, wx.ScreenDC への直接描画

---

下のコードについて、気になった点

• OnPaint 内でのタイマー呼び出しは、描画毎に呼び出されるので多重になってしまいそう。
• OnPaintは何度も呼び出されるイベントなので、Showもここで呼び出すべきでは有りません。

Comments

[dendenmushi]

後者の方法でまずは新しいプロジェクトで試してみようと思います。非矩形ウィンドウがいったいどんなものか把握していませんのでまずそれを調べるところから頑張ってみようと思います。ありがとうございます。

[teamikl]

レイヤーが２重なので、前者の方法で
透過にする範囲を事前に求めるのは難しそうですね。
こちらも徐々に、まずは静止画で非矩形ウィンドウ、
動画で～、動画で２重レイヤ～と段階を踏んで試していった方が良さそうです。

書き忘れましたが、SetShape を使う場合は、
Frame 初期化時の style オプションに wx.FRAME_SHAPED を指定します。