DearPyGui 教程（三）

(注：由于DearPyGui正处于快速迭代期，功能日兴月易，本文所描述的内容很有可能已经过时，如需了解最新信息，请至源文链接：https://hoffstadt.github.io/DearPyGui/tutorial.html)

本教程旨在演示如何使用DearPyGui的一部分特性，并未覆盖DearPyGui的全部功能，更多复杂功能的示例可以在GitHub上的示例文件夹中看到. 有关特定API的信息建议参考 API Reference.

文件, 目录, 和保存对话框

目录对话框用 select_directory_dialog() 调用，必须给它一个返回回调，返回回调的数据参数将以目录路径和文件夹路径作为字符串列表填充。
通常，目录对话框是由别的widget小部件（如按钮）调用的，下面示例演示了它是如何完成的：

from dearpygui.core import *


def directory_picker(sender, data):
    select_directory_dialog(callback=apply_selected_directory)


def apply_selected_directory(sender, data):
    log_debug(data)  # so we can see what is inside of data
    directory = data[0]
    folder = data[1]
    set_value("directory", directory)
    set_value("folder", folder)
    set_value("folder_path", f"{directory}\\{folder}")


show_logger()
add_button("Directory Selector", callback=directory_picker)
add_text("Directory Path: ")
add_same_line()
add_label_text("##dir", source="directory", color=[255, 0, 0])
add_text("Folder: ")
add_same_line()
add_label_text("##folder", source="folder", color=[255, 0, 0])
add_text("Folder Path: ")
add_same_line()
add_label_text("##folderpath", source="folder_path", color=[255, 0, 0])

start_dearpygui()

文件对话框是通过调用 open_file_dialog() 来使用的，必须给它一个返回参数。 返回的数据是以目录路径和文件路径作为字符串的列表。 文件扩展名是可选的，对话框将根据提供的扩展名过滤显示的文件。
文件对话框通常是由别的widget小部件（如按钮）调用的，示例如下：

from dearpygui.core import *


def file_picker(sender, data):
    open_file_dialog(callback=apply_selected_file, extensions=".*,.py")


def apply_selected_file(sender, data):
    log_debug(data)  # so we can see what is inside of data
    directory = data[0]
    file = data[1]
    set_value("directory", directory)
    set_value("file", file)
    set_value("file_path", f"{directory}\\{file}")


show_logger()
add_button("Directory Selector", callback=file_picker)
add_text("Directory Path: ")
add_same_line()
add_label_text("##filedir", source="directory", color=[255, 0, 0])
add_text("File: ")
add_same_line()
add_label_text("##file", source="file", color=[255, 0, 0])
add_text("File Path: ")
add_same_line()
add_label_text("##filepath", source="file_path", color=[255, 0, 0])

start_dearpygui()

效果如下：

Plot绘图

DearPyGui有 simple_plots 和 plot，两者都可以动态绘图。
simple plot接收列表，并根据列表中的数据绘制y轴数据，可以是线图，也可以是直方图，演示如下：

from dearpygui.core import *

add_simple_plot("Simpleplot1", value=[0.3, 0.9, 0.5, 0.3], height=300)
add_simple_plot("Simpleplot2", value=[0.3, 0.9, 2.5, 8.9], overlay="Overlaying", height=180, histogram=True)

start_dearpygui()

效果如下：

和simple_plot相比，plot的功能更强大。 plot同时使用x坐标和y坐标。 plot必须使用 add_plot() 命令创建，数据可以以线序列添加也可以以散点序列添加。 plot的功能如下：

• 点击并拖动: 移动画面
• 在坐标轴上点击并拖动: 在对应坐标轴方向移动画面
• 双击: 按数据充满画面
• 右击并拖动: 局部放大充满画面
• 右键双击: 打开设置
• Shift + 右击并拖动: 横向局部放大充满画面
• 滚动鼠标滚轮: 缩放
• 在坐标轴上滚动鼠标滚轮: 在对应坐标轴方向缩放
• 切换图例上的数据集以隐藏它们

此外，文本也可用作浮动点显示在绘图上。

from dearpygui.core import *
from math import cos, sin

def plot_callback(sender, data):
    clear_plot("Plot")

    data1 = []
    for i in range(0, 100):
        data1.append([3.14 * i / 180, cos(3 * 3.14 * i / 180)])

    data2 = []
    for i in range(0, 100):
        data2.append([3.14 * i / 180, sin(2 * 3.14 * i / 180)])

    add_line_series("Plot", "Cos", data1, weight=2, color=[0, 0, 255, 100])
    add_shade_series("Plot", "Cos", data1, weight=2, fill=[255, 0, 0, 100])
    add_scatter_series("Plot", "Sin", data2)


add_button("Plot data", callback=plot_callback)
add_plot("Plot", height=-1)


start_dearpygui()

通过调用 set_value() 更改plot的值，可以使simple_plot动态地绘图， 如下所示：

from dearpygui.core import *
from math import sin


def on_render(sender, data):
    frame_count = get_data("frame_count")
    frame_count += 1
    add_data("frame_count", frame_count)
    plot_data = get_value("plot_data")
    if len(plot_data) > 100:
        plot_data.pop(0)
    plot_data.append(sin(frame_count/30))
    set_value("plot_data", plot_data)


add_simple_plot("Simple Plot", source="plot_data", minscale=-1.0, maxscale=1.0, height=300)
add_data("frame_count", 0)
set_render_callback(on_render)

start_dearpygui()

plot动态绘图比 simple_plot 更简单。 用render 或 widget. set_value() 等动态函数可以很容易地给plot添加新数据， 如下所示：

from dearpygui.core import *
from math import cos


def plot_callback(sender, data):
    # keeping track of frames
    frame_count = get_data("frame_count")
    frame_count += 1
    add_data("frame_count", frame_count)

    # updating plot data
    plot_data = get_data("plot_data")
    if len(plot_data) > 2000:
        frame_count = 0
        plot_data.clear()
    plot_data.append([3.14 * frame_count / 180, cos(3 * 3.14 * frame_count / 180)])
    add_data("plot_data", plot_data)

    # plotting new data
    clear_plot("Plot")
    add_line_series("Plot", "Cos", plot_data, weight=2)


add_plot("Plot", height=-1)
add_data("plot_data", [])
add_data("frame_count", 0)
set_render_callback(plot_callback)

start_dearpygui()

效果如下：

Drawing绘图/画布

DearPyGui有一个低级别的绘图API，非常适合原始绘图、自定义小部件甚至动态绘图。
添加 add_drawing() 就能通过调用相应的绘图命令来绘图了，画布的原点在左下角。

from dearpygui.core import *

add_drawing("Drawing_1", width=300, height=300)
draw_line("Drawing_1", [10, 10], [100, 100], [255, 0, 0, 255], 1)
draw_text("Drawing_1", [16, 16], "Origin", color=[250, 250, 250, 255], size=15)
draw_arrow("Drawing_1", [50, 70], [100, 65], [0, 200, 255], 1, 10)

start_dearpygui()

drawing有scale(缩放比例)、origin(原点)和size(大小)，都可以访问和设置。 scale是x和y值的乘数, size以像素为单位。

from dearpygui.core import *
from dearpygui.simple import *

add_drawing("Drawing_1", width=300, height=300)
draw_line("Drawing_1", [10, 10], [100, 100], [255, 0, 0, 255], 1)
draw_text("Drawing_1", [16, 16], "Origin", color=[250, 250, 250, 255], size=15)
draw_arrow("Drawing_1", [50, 70], [100, 65], [0, 200, 255], 1, 10)

set_drawing_origin("Drawing_1", 150, 150) # simple
set_drawing_scale("Drawing_1", 2, 2)      # simple
set_drawing_size("Drawing_1", 400, 500)   # simple

start_dearpygui()

通调用 draw_image() ，drawing可以显示“.png”、“.jpg”或“.bmp”类型的图像”
我们可以使用关键字“pmin”和“pmax”来定义矩形的左上角和右下角从而确定画布区域。 图像将缩放以适应指定的区域。
我们可以使用关键字“uv_min”和“uv_max”来定义图像要显示的区域， 默认的uv_min=[0,0]和uv_max = [1,1]将显示整个图像，而uv_min = [0,0] uv_max = [0.5,0.5]将只显示四分之一的图像。
示例如下，为了能够演示这些特性，您需要将目录更更改为您计算机上图像的目录。

from dearpygui.core import *
# please update the image directory argument with a path to an image on your computer for this example

add_drawing("Drawing_1", width=700, height=700)
draw_image("Drawing_1", 'SpriteMapExample.png', [0, 700], pmax=[200, 500], uv_min=[0, 0], uv_max=[1, 1], tag="image")
draw_image("Drawing_1", 'SpriteMapExample.png', [0, 600], pmax=[200, 300], uv_min=[0, 0], uv_max=[1, 1])
draw_image("Drawing_1", 'SpriteMapExample.png', [0, 500], pmax=[200, 100], uv_min=[0, 0], uv_max=[1, 1])
draw_image("Drawing_1", 'SpriteMapExample.png', [400, 600], pmax=[600, 400], uv_min=[0, 0], uv_max=[0.5, 0.5])
draw_image("Drawing_1", 'SpriteMapExample.png', [400, 400], pmax=[700, 50], uv_min=[0, 0], uv_max=[3.5, 2.5])

start_dearpygui()

虽然通过清除和重新绘制整个绘图可以实现动态化，但我们还有更有效的方法。
要使绘图动态化，我们应该使用 tag 关键字来标记我们想要重新绘制的项目， 然后简单地用标记调用绘图命令， 这样将会只删除标记的内容，然后使用新命令重新绘制它。

from dearpygui.core import *


def on_render(sender, data):
    counter = get_data("counter")
    counter += 1
    modifier = get_data("modifier")
    if counter < 300:
        modifier += 1
    elif counter < 600:
        modifier -= 1
    else:
        counter = 0
        modifier = 2

    xpos = 15 + modifier*1.25
    ypos = 15 + modifier*1.25
    color1 = 255 - modifier*.8
    color3 = 255 - modifier*.3
    color2 = 255 - modifier*.8
    radius = 15 + modifier/2
    segments = round(35-modifier/10)
    draw_circle("Drawing_1", [xpos, ypos], radius, [color1, color3, color2, 255], tag="circle##dynamic")
    add_data("counter", counter)
    add_data("modifier", modifier)


add_data("counter", 0)
add_data("modifier", 2)
add_drawing("Drawing_1", width=700, height=700)
set_render_callback(on_render)

start_dearpygui()