「Krita」と「Python」でUIパーツを使って「ドッキングパネル」を構築する

背景色を変更するドッキングパネル

赤緑青を表す3つのスライダーUIを配置して、それぞれの色を0～255以下までスライドさせてキャンバスの背景色を指定します。ここでは1番上のレイヤーを背景色で塗り潰しているだけですが、背景色のレイヤー名を指定してそのレイヤーを背景色で塗り潰すようにすれば良いでしょう。

赤青緑を表す3本のスライダーUI

なぜか今までの連載のようにドキュメントを作成してビューを追加できなかったので、ドッカーではアクティブなドキュメントを取得します。そのため、先に必ず「開始」→「新しい画像」を「作成」してドキュメントを新規作成しておく必要があります。

サンプルスクリプトの最後でKritaに「MyDockerBgColor」ドッカーを登録したら「__init__」メソッドでスライダーを3つ作成します。「canvasChanged」メソッドでキャンバスが変更されたときにドキュメントを取得します。スライダーを動かしたら「change_slider」メソッドを呼び出して「get_bgcolor」メソッドで背景色を設定し、「set_layer」メソッドでレイヤーを塗り潰します(図5)。

・サンプルスクリプト「krita」→「pykrita」→「docker_bgcolor」→「docker_bgcolor.py」

# モジュール
from PyQt5.QtWidgets import *
from krita import *
# ドッカークラス
class MyDockerBgColor(DockWidget):
  # 初期化メソッド
  def __init__(self):
    super().__init__()
    self.setWindowTitle("背景色ドッカー(「設定」→「ドッキングパネル」の一覧に表示される)")
    mainWidget = QWidget(self)
    self.setWidget(mainWidget)
    # レイアウト
    layout = QGridLayout()
    # スライダーUIを構築
    self.sliderR = QSlider(Qt.Horizontal)
    self.sliderR.setMaximum(255)
    layout.addWidget(self.sliderR)
    # スライダーが動いたら「change_slider」メソッドを呼び出す
    self.sliderR.valueChanged.connect(self.change_slider)
    # スライダーUIを構築
    self.sliderG = QSlider(Qt.Horizontal)
    self.sliderG.setMaximum(255)
    layout.addWidget(self.sliderG)
    # スライダーが動いたら「change_slider」メソッドを呼び出す
    self.sliderG.valueChanged.connect(self.change_slider)
    # スライダーUIを構築
    self.sliderB = QSlider(Qt.Horizontal)
    self.sliderB.setMaximum(255)
    layout.addWidget(self.sliderB)
    # スライダーが動いたら「change_slider」メソッドを呼び出す
    self.sliderB.valueChanged.connect(self.change_slider)
    # レイアウト
    mainWidget.setLayout(layout)
  # スライダーが動いたら呼ばれる
  def change_slider(self):
    red = self.sliderR.value()
    green = self.sliderG.value()
    blue = self.sliderB.value()
    bgcolor = self.get_bgcolor(red,green,blue)
    self.set_layer(bgcolor)
    self.doc.refreshProjection()
  # 背景色の取得
  def get_bgcolor(self,red,green,blue):
    color = QColor(red,green,blue)
    pixmap = QPixmap(self.doc.bounds().size())
    pixmap.fill(color)
    return pixmap.toImage()
  # レイヤーのセット
  def set_layer(self,img):
    root = self.doc.rootNode()
    layer = root.childNodes()[0]
    if img.sizeInBytes() == 4 * layer.channels()[0].channelSize() * self.doc.width() * self.doc.height():
      ptr = img.bits()
      ptr.setsize(img.byteCount())
      layer.setPixelData(QByteArray(ptr.asstring()), 0, 0, self.doc.width(), self.doc.height())
    else:
      print('Error')
  # キャンバスが変更されたら呼ばれる
  def canvasChanged(self, canvas):
    # ドキュメントの取得
    self.doc = Krita.instance().activeDocument()
# ドッカーを追加
Krita.instance().addDockWidgetFactory(DockWidgetFactory("MyDockerBgColor", DockWidgetFactoryBase.DockRight, MyDockerBgColor))

【サンプルスクリプトの解説】
モジュールを読み込みます。
DockWidgetを継承した「MyDockerBgColor」クラスを宣言します。
__init__メソッドでレイアウトに赤「sliderR」、緑「sliderG」、青「sliderB」のスライダーUI(QSlider)を作ってレイアウトに配置します。スライダーの最大値は255以下にセットします(setMaximum)。3つのいずれもスライダーの値が変化したら「change_slider」メソッドを呼び出します。
change_sliderメソッドで赤緑青のスライダーの値を取得して描画メソッドを呼び出します。
get_bgcolorメソッドで赤緑青をQColorのcolor変数に変換し、QPixmapをcolor変数で塗り潰します。
set_layerメソッドで現在のドキュメントの一番上のレイヤーを背景色で塗り潰します。
canvasChangedメソッドでキャンバスが変更されるたびにdocプロパティにアクティブなドキュメントを取得します。

初期化ファイル

特に何も実行していないのですが、初期化__init__.pyファイルも用意します。

・サンプルスクリプト「krita」→「pykrita」→「docker_bgcolor」→「__init__.py」

from .docker_bgcolor import MyDockerBgColor

【サンプルスクリプトの解説】
モジュールを読み込みます。

ドッカーをプラグインに設定する

ドッカープラグインを設定するには.desktopファイル(ここでは「docker_bgcolor.desktop」ファイル)に記述します。「X-KDE-Library」に「docker_bgcolor」プログラムを指定します。

・サンプルスクリプト「krita」→「pykrita」→「docker_bgcolor」→「docker_bgcolor.desktop」

[Desktop Entry]
Type=Service
ServiceTypes=Krita/PythonPlugin
X-KDE-Library=docker_bgcolor
X-Python-2-Compatible=false
Name=MyDockerBgColor
Comment=MyDockerBgColorドッキングパネル。

ドッカープラグインのインストール

docker_bgcolorドッカーのスクリプトを配置するのはdocker_messageboxプラグインの配置のときとほぼ同じです。1.か2.を操作すれば、図6のようにドッキングパネルメニューが選べます。

1. 「C:/Users/ユーザー名/AppData/Roaming/krita/pykrita」フォルダに「docker_bgcolor/__init__.py」ファイル、「docker_bgcolor/docker_bgcolor.py」ファイル、「docker_bgcolor.desktop」ファイルを配置します。
2. または、ドッカープラグインをzipファイルを使ってインストールするには「docker_bgcolor_plugin」フォルダに「docker_bgcolor/__init__.py」ファイル、「docker_bgcolor/docker_bgcolor.py」ファイル、「docker_bgcolor.desktop」ファイルを入れ、「docker_bgcolor_plugin」フォルダをzipファイルに圧縮します。Kritaの「ツール」→「スクリプト」→「Pythonプラグインをファイルからインポート」メニューを実行します。
   【コラム】ドッカーやプラグインを作る際に

   ドッカーやプラグインを作る際には、いきなり完成形を作ってしまうとデバッグがとても大変です。もちろんエラーの箇所を教えてくれますが、修正作業に手間がかかります。

   そこで、まず「スクリプター」で実行テストしてからにすると良いでしょう。そのためにはドッキングパネルへ配置する前に、QDialogクラスを使ったダイアログでベータ版を作って実行テストしてみましょう。

おわりに

今回はKritaのメインUIにドッキングパネルを取り付けて、そのドッキングパネルにUIパーツを配置する解説をしました。UIパーツは他にもたくさん存在するので、ぜひみなさん自身で色々と試してみてください。

本連載は今回で終了となりますが、また次回の新連載「WebGPUによる3Dアニメーション入門」でお会いしましょう!