Tkinterはjsキャンバスを使用してグラデーションカラーを実現します

Tkinterはjsキャンバスを使用してグラデーションカラーを実現します

以前はGUIにあまり興味がなかったのですが、最近、特別な理由によりtkinterを使用する必要があり、グラデーションカラーを実装する必要がありました。しかし、ドキュメントを調べてみると、この機能を実装するための組み込み関数がないことがわかりました。自分で実装する必要があったので、グラデーションカラーの原理を調べて実装しました。

1. RGBを使用して色を表す

Tkinter は rgb をパラメータとして使用する関数を提供していないため、16 進値を grb 値に変換する必要があります。もちろん、方法も非常に簡単で、16 進演算を実行するだけです。

コード:

def use_rgb(rgb):
    「」
    rgb を 16 進数に変換します。引数:
        rgb: rgb カラー戻り値: 16 進数 """
    rgb = str(rgb)
    RGB = rgb.replace('(', '').replace(")", '').split(',') # RGB 形式を分割します color = '#'
    RGBのiの場合:
        数値 = int(i)
        # R、G、B を 16 進数に変換し、大文字にします。hex() 関数は、10 進整数を 16 進数に変換し、文字列形式で表現するために使用されます。color += str(hex(num))[-2:].replace('x', '0')
    色を返す

渡された rgb はタプル形式であるため、文字列に変換され、その後 16 進文字列に変換されます。先頭に # を追加することを忘れないでください。

2. Tkinter キャンバスコンポーネント

キャンバス コンポーネントは、tkinter ライブラリで描画するために使用されます。線分、四角形、多角形、円弧などを描画できます。

キャンバスコンポーネントを使用するには、まずキャンバスの親オブジェクトとしてウィンドウオブジェクトを作成する必要があります。

tkinter を tk としてインポートする
# まずtkinterコンポーネントを初期化し、ウィンドウオブジェクトを作成します。window = tk.Tk()
# ウィンドウのタイトル、長さ、幅を設定します window.title("title")
ウィンドウ.ジオメトリ("800x600")

ウィンドウを表示する必要があるため、実行後に何も起こりません。

ウィンドウ.メインループ()

次に、光のない小さなフレームがあります。

キャンバスの作成は、作成クラスのインスタンス化でもあります。パラメータなしで後で調整することも、作成と同時にインスタンス化することもできます。

# キャンバスの使用
キャンバス = window.Canvas()

以下のこともできます:

# window は canvas の親オブジェクトで、width と height は canvas の幅と高さです。canvas = tk.Canvas(window, width=800, height=600)
# このメソッドはレイアウトモードを設定することができますが、もちろんキャンバスを表示するメソッドでもあります canvas.pack()

もちろん、この時点では実行後には何も残りません。キャンバスに何かを描く必要があります

次にキャンバスに長方形を描きます

キャンバス.create_rectangle(100, 100, 300, 300, 塗りつぶし="赤")
# このコード行は、canvas.create_rectangle((100, 100, 300, 300), fill="red") のように書くこともできます。

赤い四角形が描画されます。

3. グラデーションを設定する

ここでのグラデーションは長方形に直接適用されるのではなく、グラデーション効果を形成するために、それぞれに色が表示される線分を使用する必要があります。

線分を描く方法は次のとおりです。

キャンバス.create_line()

パラメータの形式は上記の線分と似ていますが、線分を描画するために必要な座標は 2 つだけである点が異なります。

3.1 勾配の原理

単純な原理は、色を暗い色から明るい色に設定し、次に別の明るい色に設定し、最後に再び暗い色に設定することです。

シンプルに聞こえますが、実装するのはまだ少し難しいです。

私たちのアイデアは次のとおりです。

ループ線分

各線分の色を計算する

線分を描くときは、次の 3 つのパラメータを計算するだけで済みます。

長方形の長さ 線分の始点のx座標 線分の始点のy座標

ここでの開始点は初期点ではなく、線分の上の点です。

グラデーションに必要な2色のRGB値も知っておく必要があります

グラデーションの場合、最初に特定の線分の値を知るだけで、それを特定の線分の色である rgb と組み合わせるだけです。

3.2 例1

この赤い四角形を左から右への赤と青のグラデーションに変更します

赤の grb 値 (255, 0, 0)

青のRGB値(0, 0, 255)

#!/usr/bin/env python
# -*- コーディング: utf-8 -*-
# @著者: Smly
# @日時: 2021/12/4 19:44
#@バージョン: 1.0
tkinter を tk としてインポートする
赤 = (255, 0, 0)
青 = (0, 0, 255)

def use_rgb(rgb):
    「」
    rgb を 16 進数に変換します。引数:
        rgb: rgb カラー戻り値: 16 進数 """
    rgb = str(rgb)
    RGB = rgb.replace('(', '').replace(")", '').split(',') # RGB 形式を分割します color = '#'
    RGBのiの場合:
        数値 = int(i)
        # R、G、B を 16 進数に変換し、大文字にします。hex() 関数は、10 進整数を 16 進数に変換し、文字列形式で表現するために使用されます。color += str(hex(num))[-2:].replace('x', '0')
    色を返す

# まずtkinterコンポーネントを初期化し、ウィンドウオブジェクトを作成します。window = tk.Tk()
# ウィンドウのタイトル、長さ、幅を設定します window.title("title")
ウィンドウ.ジオメトリ("800x600")
# キャンバスの使用
キャンバス = tk.Canvas(ウィンドウ、幅=800、高さ=600)
キャンバス.パック()
a1、a2、a3、b1、b2、b3 = 赤[0]、赤[1]、赤[2]、青[0]、青[1]、青[2]
# RGBの違い
r、g、b = (b1 - a1)、(b2 - a2)、(b3 - a3)
印刷(r,g,b)
高さ = 200
iが範囲(200)内にある場合:
    x1 = 100 + i
    y1 = 100
    t = (x1 - 100) / (300 - 100)
    rgb = (int(a1 + r * t), int(a2 + g * t), int(a3 + b * t))
    印刷(rgb)
    キャンバス.create_line((x1, y1), (x1, y1 + h), 塗りつぶし=use_rgb(rgb))
ウィンドウ.メインループ()

効果:

ここに画像の説明を挿入

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript キャンバスはグラデーションカラーで四角形を描画します
  • キャンバスのグラデーションに基づいたWeChatアプレットのレインボー効果の例
  • JavaScript+html5 キャンバスのグラデーション領域の描画の完全な例
  • js+HTML5 を使ってキャンバスの複数のカラーグラデーション効果を実現する方法

<<:  DockerでKafkaをデプロイする方法

>>:  テーブルを使用してフォームコントロールの形式を調整し、見栄えを良くします。

推薦する

CentOS7 に Redis をインストールして設定する方法

導入Redis を詳しく説明する必要はありません。インストールと設定を始めましょう。インストールソー...

入力テキスト ボックスと画像検証コードの位置合わせの問題 (画像は常に入力より 1 つ上になります)

Web ページ制作では、input と img が同じ行に配置されることが多く、img タグが常に ...

MySQL 8.0.13 のダウンロードとインストールのチュートリアル(画像とテキスト付き)

MySQL は最もよく使用されるデータベースです。詳しく知るには、コンピュータにインストールする必...

MySQLデータベースのnullに関する知識ポイントのまとめ

MySQL データベースでは、null は一般的な状況です。MySQL での null に関する注意...

Vue3.xはコンポーネント通信にmitt.jsを使用します

目次クイックスタート使い方基本原則Vue2.x はコンポーネント通信に EventBus を使用しま...

MySQL空間関数を使用してロケーションパンチインを実装するための完全な手順

序文プロジェクトの要件は、ユーザーの現在の位置が特定の地理的位置範囲内にあるかどうかを判断することで...

docker で php+nginx+swoole+mysql+redis 環境を構築する方法

オペレーティングシステム: Alibaba Cloud ESC インスタンス centos7.4ソフ...

Dockerはdockerfileを使用してnode.jsアプリケーションを起動します

Dockerfileの作成expressによって自動的に作成されたディレクトリを例にとると、ディレク...

Linuxで新しいユーザーを作成し、指定されたディレクトリへの権限を付与する

1 ユーザーを作成し、ユーザーのルートパスとパスワードを指定します useradd -d /home...

VMware Workstation 仮想マシンのインストール操作方法

仮想マシンは非常に便利なテストソフトウェアです。ハードウェアに損傷を与えることなく、さまざまなテスト...

MySQL の条件文で 1 つの情報しか読み取れない問題に対する 2 つの解決策

今日、私の同僚が MYSQL クエリ ステートメントの作成時に非常に奇妙な問題に遭遇しました。MyS...

Vue2で配列の変更を検出できない理由と解決策

目次回避策Vue2.0 で 2 つの配列の変更を監視できないのはなぜですか?ソースコード分析ヴュー3...

Dockerコマンドの自動補完の実装

序文この友人がどれくらいDockerを使っていなかったのかは分かりませんが、突然Dockerコマンド...

Nginx キャッシュ ファイルと動的ファイルの自動バランス設定スクリプト

nginx Nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバー...