自定义的 tkinter 画图工具

本文创建了一个自定义的画图工具：

from tkinter import ttk, Tk
from tkinter import Canvas, Menu
from tkinter import StringVar


class Graph(Canvas):
    '''创建图形元素（简称 graph），包括矩形框，椭圆形，线段，矩形框，如果您想要画“点”，可以选中矩形框或者椭圆形。
    '''

    def __init__(self, master=None, cnf={}, **kw):
        super().__init__(master, cnf, **kw)
        self.master = master
        self.master.title('计算机视觉')
        self.color_options = ('red', 'blue', 'black', 'white', 'green')
        self._init_params()
        self.create_menu()
        self.change()

    def _create_variable(self):
        '''菜单变量'''
        self.image_var = StringVar()
        self.graph_var = StringVar()

    def _init_params(self):
        self.configure(width=400, height=400)
        self.current_id = None
        self.color = 'black'
        self.x = self.y = 0  # 记录鼠标左键的坐标
        self.color = 'blue'  # graph 对象的颜色
        self.width = 2  # graph 的宽度
        self._create_variable()

    def create_menu(self):
        self.master.option_add('*tearOff', False)  # 表示菜单不能移除窗口
        menu_bar = Menu(self.master)  # 创建菜单栏
        self.master['menu'] = menu_bar  # 或者 root.config(menu=menubar)
        painter_bar = Menu(menu_bar)
        pencil_menu = Menu(painter_bar)
        modify_menu = Menu(painter_bar)
        color_menu = Menu(painter_bar)

        menu_bar.add_cascade(label='创作', menu=painter_bar)
        painter_bar.add_cascade(label='画笔', menu=pencil_menu)
        painter_bar.add_cascade(label='修改', menu=modify_menu)

        kw_menu = {
            'variable': self.graph_var,
            'command': self.bind_graph
        }

        pencil_options = ('矩形框', '椭圆形', '线段')
        [pencil_menu.add_radiobutton(label=pencil, **kw_menu)
         for pencil in pencil_options]

        modify_options = ('移动选中的元素', '移动整个画布', '移动全部矩形框')
        [modify_menu.add_radiobutton(label=modify, **kw_menu)
         for modify in modify_options]

    def update_xy(self, event):
        '''按压鼠标左键'''
        self.x = event.x
        self.y = event.y

    def set_color(self, new_color):
        self.color = new_color

    def palette(self, loc, color):
        kw = {
            'fill': color,
            'tags': ('调色板', f'{color}调色板')
        }
        return self.create_rectangle(loc, **kw)

    def change(self):
        # 创建 3 个颜色选择块
        red_id = self.palette((10, 10, 20, 20), "red")
        blue_id = self.palette((10, 25, 20, 35), "blue")
        black_id = self.palette((10, 40, 20, 50), "black")
        # 添加标记
        self.addtag('被选中的调色板', 'withtag', black_id)
        # 绑定事件
        self.tag_bind(red_id, "<Button-1>", lambda x: self.set_color("red"))
        self.tag_bind(blue_id, "<Button-1>", lambda x: self.set_color("blue"))
        self.tag_bind(black_id, "<Button-1>",
                      lambda x: self.set_color("black"))

    def select_graph(self, event):
        '''按压鼠标右键'''
        self.configure(cursor="target")
        self.update_xy(event)
        # 获取当前鼠标指示的对象的 id
        self.current_id = self.find_withtag('current')

    def get_bbox(self, event):
        x0, y0 = self.x, self.y  # 左上角坐标
        x1, y1 = event.x, event.y  # 右下角坐标
        bbox = x0, y0, x1, y1
        return bbox

    def draw_graph(self, event):
        '''释放鼠标左键'''
        self.configure(cursor="arrow")
        bbox = self.get_bbox(event)
        self.create_graph(bbox)

    def bind_graph(self, event=None):
        graph = self.graph_var.get()
        if '移动' in graph:
            self.unbind('<ButtonRelease-1>')
            self.unbind('<1>')
            self.bind('<1>', self.select_graph)
            self.bind('<ButtonRelease-1>', self.move_graph)
        else:
            self.unbind('<ButtonRelease-1>')
            self.unbind('<1>')
            self.bind('<1>', self.update_xy)
            self.bind("<ButtonRelease-1>", self.draw_graph)

    def move_graph(self, event):
        print(self.current_id)
        new_x, new_y = event.x, event.y
        x_move = new_x - self.x
        y_move = new_y - self.y
        self.move(self.current_id, x_move, y_move)

    def create_graph(self, bbox):
        '''创建图形
        参数
        ========
        bbox: x0,y0,x1,y1
        '''
        tags = 'graph'
        kw = {
            'width': self.width,
            'tags': tags
        }
        graph = self.graph_var.get()
        if graph == '矩形框':
            self.create_rectangle(bbox, outline=self.color, **kw)
            self.addtag_withtag('rect', 'graph')
        elif graph == '椭圆形':  # 外接矩形的四个坐标
            self.create_oval(bbox, outline=self.color, **kw)
            self.addtag_withtag('oval', 'graph')
        elif graph == '线段':
            self.create_line(bbox, fill=self.color, **kw)
            self.addtag_withtag('line', 'graph')

    def layout(self):
        '''布局'''
        # 将整个画布铺满屏幕
        self.master.columnconfigure(0, weight=1)
        self.master.rowconfigure(0, weight=1)
        self.grid(column=0, row=0, sticky='nwes')


if __name__ == '__main__':
    root = Tk()
    self = Graph(root)
    self.layout()
    root.mainloop()

下面直接看效果图：

直接点击图中的颜色小方框，可以切换不同的画笔颜色。

该工具主要有两个菜单栏选项：“画笔”，“修改”。“画笔” 暂时仅仅提供 3 个形状：

图1 中的各个图形的“作画”方法是：选中您想要画的形状，拖动鼠标左键，释放鼠标左键便会生成图形元素。

修改选项仅仅实现了移动选中的元素这一功能。

视觉效果更好的优化

由于 Tcl 支持：'⬜','⚪', '⸺', '•', '⯀', '⎔', '▅' 等 UTF-8 字符（具体参考维基百科的 Unicode/List of useful symbols，Geometric Shapes 以及 FileFormat.Info 的 Unicode Characters in the ‘Symbol, Other’ Category）

代码如下：

from tkinter import ttk, Tk
from tkinter import Canvas, Menu
from tkinter import StringVar


class Graph(Canvas):
    '''创建图形元素（简称 graph），包括矩形框（可以是方形点），椭圆形（圆形点），线段

    '''

    def __init__(self, master=None, cnf={}, **kw):
        super().__init__(master, cnf, **kw)
        self.master = master
        self.master.title('计算机视觉')
        self.color_options = ('red', 'blue', 'black', 'white', 'green')
        self._init_params()
        self.create_menu()
        self.change()

    def _create_variable(self):
        '''菜单变量'''
        self.image_var = StringVar()
        self.graph_var = StringVar()

    def _init_params(self):
        self.configure(width=400, height=400)
        self.current_id = None
        self.color = 'black'
        self.x = self.y = 0  # 记录鼠标左键的坐标
        self.color = 'blue'  # graph 对象的颜色
        self.width = 2  # graph 的宽度
        self._create_variable()

    def create_menu(self):
        self.master.option_add('*tearOff', False)  # 表示菜单不能移除窗口
        menu_bar = Menu(self.master)  # 创建菜单栏
        self.master['menu'] = menu_bar  # 或者 root.config(menu=menubar)
        painter_bar = Menu(menu_bar)
        pencil_menu = Menu(painter_bar)
        modify_menu = Menu(painter_bar)
        color_menu = Menu(painter_bar)

        menu_bar.add_cascade(label='创作', menu=painter_bar)
        painter_bar.add_cascade(label='画笔', menu=pencil_menu)
        painter_bar.add_cascade(label='修改', menu=modify_menu)

        kw_menu = {
            'variable': self.graph_var,
            'command': self.bind_graph
        }

        pencil_options = ('⬜', '⚪', '⸺')
        [pencil_menu.add_radiobutton(label=pencil, **kw_menu)
         for pencil in pencil_options]

        modify_options = ('移动选中的元素',
                          '移动全部的元素',
                          '移动全部的图元素',
                          '删除全部 ⯀',
                          '删除全部 ●',
                          '移动全部 ⬜',
                          '移动全部 ⚪',
                          '移动全部 ⸺'
                          )
        [modify_menu.add_radiobutton(label=modify, **kw_menu)
         for modify in modify_options]
        self.unbind('<ButtonRelease-1>')
        self.unbind('<1>')

    def update_xy(self, event):
        '''按压鼠标左键'''
        self.x = event.x
        self.y = event.y

    def set_color(self, new_color):
        self.color = new_color

    def palette(self, loc, color):
        kw = {
            'fill': color,
            'tags': ('调色板', f'{color}调色板')
        }
        return self.create_rectangle(loc, **kw)

    def change(self):
        # 创建 3 个颜色选择块
        red_id = self.palette((10, 10, 20, 20), "red")
        blue_id = self.palette((10, 25, 20, 35), "blue")
        black_id = self.palette((10, 40, 20, 50), "black")
        # 添加标记
        self.addtag('被选中的调色板', 'withtag', black_id)
        # 绑定事件
        self.tag_bind(red_id, "<1>", lambda x: self.set_color("red"))
        self.tag_bind(blue_id, "<1>", lambda x: self.set_color("blue"))
        self.tag_bind(black_id, "<1>", lambda x: self.set_color("black"))

    def select_graph(self, event):
        '''按压鼠标右键'''
        self.configure(cursor="target")
        self.update_xy(event)
        # 获取当前鼠标指示的对象的 id
        self.current_id = self.find_withtag('current')

    def get_bbox(self, event):
        x0, y0 = self.x, self.y  # 左上角坐标
        x1, y1 = event.x, event.y  # 右下角坐标
        bbox = x0, y0, x1, y1
        return bbox

    def draw_graph(self, event):
        '''释放鼠标左键'''
        self.configure(cursor="arrow")
        bbox = self.get_bbox(event)
        self.create_graph(bbox)
        rect_ids = self.find_withtag('rect')
        oval_ids = self.find_withtag('oval')
        line_ids = self.find_withtag('line')
        point_ids = self.find_withtag('point')
        print(rect_ids, oval_ids, line_ids, point_ids, bbox)

    def move_graph(self, event, graph_id_or_tag):
        x_move, y_move = self.move_strides(event)
        self.move(graph_id_or_tag, x_move, y_move)

    def bind_graph(self, event=None):
        graph = self.graph_var.get()
        self.unbind('<ButtonRelease-1>')
        self.unbind('<1>')
        if graph == '移动选中的元素':
            self.bind('<1>', self.select_graph)
            def move_action(e): return self.move_graph(e, self.current_id)
            self.bind('<ButtonRelease-1>', move_action)
        elif graph == '移动全部的元素':
            self.bind('<1>', self.select_graph)
            def move_action(e): return self.move_graph(e, 'all')
            self.bind('<ButtonRelease-1>',  move_action)
        elif graph == '移动全部的图元素':
            self.bind('<1>', self.select_graph)
            def move_action(e): return self.move_graph(e, 'graph')
            self.bind('<ButtonRelease-1>',  move_action)
        elif graph == '移动全部 ⬜':
            self.bind('<1>', self.select_graph)
            def move_action(e): return self.move_graph(e, 'rect')
            self.bind('<ButtonRelease-1>',  move_action)
        elif graph == '移动全部 ⚪':
            self.bind('<1>', self.select_graph)
            def move_action(e): return self.move_graph(e, 'oval')
            self.bind('<ButtonRelease-1>',  move_action)
        elif graph == '移动全部 ⸺':
            self.bind('<1>', self.select_graph)
            def move_action(e): return self.move_graph(e, 'line')
            self.bind('<ButtonRelease-1>',  move_action)
        else:
            self.bind('<1>', self.update_xy)
            self.bind("<ButtonRelease-1>", self.draw_graph)

    def move_strides(self, event):
        new_x, new_y = event.x, event.y
        x_move = new_x - self.x
        y_move = new_y - self.y
        print(x_move, y_move)
        return x_move, y_move

    def create_graph(self, bbox):
        '''创建图形
        参数
        ========
        bbox: x0,y0,x1,y1
        '''
        start = bbox[:2]
        end = bbox[2:]
        kw = {
            'width': self.width,
        }
        tags = {'graph'}
        #all_graph = {'rect', 'oval', 'line'}
        graph = self.graph_var.get()
        if graph == '⬜':  # 矩形框
            tags.add('rect')
            if start == end:
                tags.add('point')
            self.create_rectangle(bbox, outline=self.color,
                                  tags=tuple(tags), **kw)
        elif graph == '⚪':  # 椭圆形，bbox 指定外接矩形的四个坐标
            tags.add('oval')
            if start == end:
                tags.add('point')
            self.create_oval(bbox, outline=self.color, tags=tuple(tags), **kw)
        elif graph == '⸺':  # 线段
            tags.add('line')
            self.create_line(bbox, fill=self.color, tags=tuple(tags), **kw)

    def layout(self):
        '''布局'''
        # 将整个画布铺满屏幕
        self.master.columnconfigure(0, weight=1)
        self.master.rowconfigure(0, weight=1)
        self.grid(column=0, row=0, sticky='nwes')


if __name__ == '__main__':
    root = Tk()
    self = Graph(root)
    self.layout()
    root.mainloop()

该代码实现对矩形框、椭圆形、线段的绘制与移动，但是对于“点”（point）的移动和删除还暂时没有实现。

下面可直接看效果图：

可以看出，使用“线段”画笔也可以多边形。

需要注意的是：代码中的 bbox 表示鼠标左键移动的方向向量。

实现“点”与矩形框和椭圆形的分离，同时支持对点的移动：

from tkinter import ttk, Tk
from tkinter import Canvas, Menu
from tkinter import StringVar


class Graph(Canvas):
    '''创建图形元素（简称 graph），包括矩形框（可以是方形点），椭圆形（圆形点），线段

    '''

    def __init__(self, master=None, cnf={}, **kw):
        super().__init__(master, cnf, **kw)
        self.master = master
        self.master.title('计算机视觉')
        self.color_options = ('red', 'blue', 'black', 'white', 'green')
        self._init_params()
        self.create_menu()
        self.change()

    def _create_variable(self):
        '''菜单变量'''
        self.image_var = StringVar()
        self.graph_var = StringVar()

    def _init_params(self):
        self.configure(width=400, height=400)
        self.current_id = None
        self.color = 'black'
        self.x = self.y = 0  # 记录鼠标左键的坐标
        self.color = 'blue'  # graph 对象的颜色
        self.width = 2  # graph 的宽度
        self._create_variable()

    def create_menu(self):
        self.master.option_add('*tearOff', False)  # 表示菜单不能移除窗口
        menu_bar = Menu(self.master)  # 创建菜单栏
        self.master['menu'] = menu_bar  # 或者 root.config(menu=menubar)
        painter_bar = Menu(menu_bar)
        pencil_menu = Menu(painter_bar)
        modify_menu = Menu(painter_bar)
        color_menu = Menu(painter_bar)

        menu_bar.add_cascade(label='创作', menu=painter_bar)
        painter_bar.add_cascade(label='画笔', menu=pencil_menu)
        painter_bar.add_cascade(label='修改', menu=modify_menu)

        kw_menu = {
            'variable': self.graph_var,
            'command': self.bind_graph
        }

        pencil_options = ('⬜', '⚪', '⸺', '⯀', '●')
        [pencil_menu.add_radiobutton(label=pencil, **kw_menu)
         for pencil in pencil_options]

        modify_options = ('移动选中的元素',
                          '移动全部的元素',
                          '移动全部的图元素',
                          '移动全部 ⯀',
                          '移动全部 ●',
                          '移动全部 ⬜',
                          '移动全部 ⚪',
                          '移动全部 ⸺'
                          )
        [modify_menu.add_radiobutton(label=modify, **kw_menu)
         for modify in modify_options]
        self.unbind('<ButtonRelease-1>')
        self.unbind('<1>')

    def update_xy(self, event):
        '''按压鼠标左键'''
        self.x = event.x
        self.y = event.y

    def set_color(self, new_color):
        self.color = new_color

    def palette(self, loc, color):
        kw = {
            'fill': color,
            'tags': ('调色板', f'{color}调色板')
        }
        return self.create_rectangle(loc, **kw)

    def change(self):
        # 创建 3 个颜色选择块
        red_id = self.palette((10, 10, 20, 20), "red")
        blue_id = self.palette((10, 25, 20, 35), "blue")
        black_id = self.palette((10, 40, 20, 50), "black")
        # 添加标记
        self.addtag('被选中的调色板', 'withtag', black_id)
        # 绑定事件
        self.tag_bind(red_id, "<1>", lambda x: self.set_color("red"))
        self.tag_bind(blue_id, "<1>", lambda x: self.set_color("blue"))
        self.tag_bind(black_id, "<1>", lambda x: self.set_color("black"))

    def select_graph(self, event):
        '''按压鼠标右键'''
        self.configure(cursor="target")
        self.update_xy(event)
        # 获取当前鼠标指示的对象的 id
        self.current_id = self.find_withtag('current')

    def get_bbox(self, event):
        x0, y0 = self.x, self.y  # 左上角坐标
        x1, y1 = event.x, event.y  # 右下角坐标
        bbox = x0, y0, x1, y1
        return bbox

    def draw_graph(self, event):
        '''释放鼠标左键'''
        self.configure(cursor="arrow")
        bbox = self.get_bbox(event)
        self.create_graph(bbox)
        rect_ids = self.find_withtag('rect')
        oval_ids = self.find_withtag('oval')
        line_ids = self.find_withtag('line')
        rect_point_ids = self.find_withtag('rect_point')
        oval_point_ids = self.find_withtag('oval_point')
        print(rect_ids, oval_ids, line_ids,
              rect_point_ids, oval_point_ids, bbox)

    def move_graph(self, event, graph_id_or_tag):
        x_move, y_move = self.move_strides(event)
        self.move(graph_id_or_tag, x_move, y_move)

    def bind_graph(self, event=None):
        graph = self.graph_var.get()
        self.unbind('<ButtonRelease-1>')
        self.unbind('<1>')
        if graph == '移动选中的元素':
            self.bind('<1>', self.select_graph)
            def move_action(e): return self.move_graph(e, self.current_id)
            self.bind('<ButtonRelease-1>', move_action)
        elif graph == '移动全部的元素':
            self.bind('<1>', self.select_graph)
            def move_action(e): return self.move_graph(e, 'all')
            self.bind('<ButtonRelease-1>',  move_action)
        elif graph == '移动全部的图元素':
            self.bind('<1>', self.select_graph)
            def move_action(e): return self.move_graph(e, 'graph')
            self.bind('<ButtonRelease-1>',  move_action)
        elif graph == '移动全部 ⬜':
            self.bind('<1>', self.select_graph)
            def move_action(e): return self.move_graph(e, 'rect')
            self.bind('<ButtonRelease-1>',  move_action)
        elif graph == '移动全部 ⚪':
            self.bind('<1>', self.select_graph)
            def move_action(e): return self.move_graph(e, 'oval')
            self.bind('<ButtonRelease-1>',  move_action)
        elif graph == '移动全部 ⸺':
            self.bind('<1>', self.select_graph)
            def move_action(e): return self.move_graph(e, 'line')
            self.bind('<ButtonRelease-1>',  move_action)
        elif graph == '移动全部 ⯀':
            self.bind('<1>', self.select_graph)
            def move_action(e): return self.move_graph(e, 'rect_point')
            self.bind('<ButtonRelease-1>',  move_action)
        elif graph == '移动全部 ●':
            self.bind('<1>', self.select_graph)
            def move_action(e): return self.move_graph(e, 'oval_point')
            self.bind('<ButtonRelease-1>',  move_action)
        else:
            self.bind('<1>', self.update_xy)
            self.bind("<ButtonRelease-1>", self.draw_graph)

    def move_strides(self, event):
        new_x, new_y = event.x, event.y
        x_move = new_x - self.x
        y_move = new_y - self.y
        return x_move, y_move

    def create_graph(self, bbox):
        '''创建图形
        参数
        ========
        bbox: x0,y0,x1,y1
        '''
        start = bbox[:2]
        end = bbox[2:]
        kw = {
            'width': self.width,
        }
        tags = {'graph'}
        #all_graph = {'rect', 'oval', 'line'}
        graph = self.graph_var.get()
        if start == end:
            if graph == '⯀':
                tags.add('rect_point')
                self.create_rectangle(bbox, outline=self.color,
                                      tags=tuple(tags), **kw)
            elif graph == '●':
                tags.add('oval_point')
                self.create_oval(bbox, outline=self.color,
                                 tags=tuple(tags), **kw)
        elif graph == '⬜':  # 矩形框
            tags.add('rect')
            self.create_rectangle(bbox, outline=self.color,
                                  tags=tuple(tags), **kw)
        elif graph == '⚪':  # 椭圆形，bbox 指定外接矩形的四个坐标
            tags.add('oval')
            if start == end:
                tags.add('point')
            self.create_oval(bbox, outline=self.color, tags=tuple(tags), **kw)
        elif graph == '⸺':  # 线段
            tags.add('line')
            self.create_line(bbox, fill=self.color, tags=tuple(tags), **kw)

    def layout(self):
        '''布局'''
        # 将整个画布铺满屏幕
        self.master.columnconfigure(0, weight=1)
        self.master.rowconfigure(0, weight=1)
        self.grid(column=0, row=0, sticky='nwes')


if __name__ == '__main__':
    root = Tk()
    self = Graph(root)
    self.layout()
    root.mainloop()

更加健壮的代码见 基于 tkinter 开发图形操作案例