PySimpleGUIWeb.Graph

Graph 的基本概念

Graph 实际上是一种 Canvas，可以将 Graph 组件看作是一个绘图板。它的原型是：

Graph(canvas_size,      # (x, y), 绘图区域尺寸，单位像素
    graph_bottom_left,  # (x, y), 左下角坐标
    graph_top_right,    # (x, y), 右上角坐标
    background_color=None,   # 背景色
    pad=None,           # (左右, 上下), 边距宽度
    change_submits=False,  # 请勿使用
    drag_submits=False,  # 启用拖拽事件
    enable_events=False, # 启用绘图板的事件监控，比如对绘图区域的点击之类。
    key=None,           # 与其他组件类似，key 用于对组件命名，read 返回的 event
    k=None,             # key 的简写
    tooltip=None,       # 鼠标放置在绘图区域的提示信息，string
    right_click_menu=None, # 绘图区域上的右键菜单
    visible=True,       # 组件是否可见
    float_values=False, # 是否允许使用小数坐标
    border_width=0,     # 组件边框
    metadata=None)      # 用自定义数据

最关键的几个参数：

• canvas_size 指定绘图区域的可见尺寸；
• graph_bottom_left 和 graph_top_right 用于推断坐标系，你可以在代码中随时切换最有利的直角坐标系；
• drag_submits = True 才能捕获到拖拽事件，如希望能拖拽图片，就需要启用该属性；
• key，组件的名称，read 返回的事件，这与其他组件一致。

只要调用上面的方法，就可以在 Layout 中创建一个 Graph 组件:

import PySimpleGUI as sg
from collections import  namedtuple

# xy 坐标系
XYCoord = namedtuple("XYCoord", ["x", "y"])

# 定义绘图区域尺寸，这里只是借用 xy 坐标，分别表示 x、y 方向的尺寸
graph_size = XYCoord(500, 500)

layout = [
    [sg.Graph(canvas_size=graph_size, graph_bottom_left=(0, graph_size.y), graph_top_right=(graph_size.x, 0), background_color="white", key = "-GRAPH-", drag_submits=True, enable_events = True)],
    [sg.OK(), sg.Cancel()]
]

自定义坐标系

Graph 允许用户自定义坐标系的原点位置，在 Graph 初始化中通过下面两个参数实现：

graph_bottom_left=(0, graph_size.y), graph_top_right=(graph_size.x, 0)

由这两个参数可以推导出这样的坐标系：

确定一个矩形的尺寸和位置，只需要确定对角的位置就可以了。粉色的坐标是我们传入的对角参数坐标。

图中采用了 GUI 中最常用的左上角为坐标原点，根据 canvas_size 我计算出了两个点的坐标。

对于 Graph 组件，当它接受到对角坐标的时候并不知道用户要使用的坐标系是怎样的，绿色的坐标是 Graph 自行计算出来的原点。

Graph 始终通过用户提供的这两个对角推导用户使用的坐标系，稍晚也可以随时用 Graph.change_coordinates 方法切换新的坐标系，参数也大同小异。