Drawing a rectangle using Tkinter?

Question

I have this code so far. At first I made it draw circles which worked well. I thought that drawing rectangles would be as easy, but I have only been able to draw squares. I was hoping to have shapes of various widths and lengths. Do I know I need to change the box of (x1, y1, x2, y2) but how would I go about that.

def down(event): # A mouse event will be passed in with x and y attributes
global startx, starty # Use global variables for assignment
startx = event.x # Store the mouse down coordinates in the global variables
starty = event.y

def up(event):
    tk_color_string = color(red_intvar, green_intvar, blue_intvar)
    r = (startx-event.x)**2 + (starty-event.y)**2  # Pythagorean theorem
    r = int(r**.5)                                 # square root to get distance
    new_shape = canvas.create_rectangle(startx-r, starty-r, startx+r, starty+r,
                                     fill=tk_color_string, outline='#000000')
    shapes.append(new_shape) # aggregate the canvas' item

The whole code is over 100 lines long, so I hope this piece helps demonstrate what I am asking.enter image description here

Answer 1

I am providing an example code below that I just wrote on how to create rectangles in tkinter canvas with a mouse. I hope this helps you understand the relevant procedures and the methods you need. Thereafter, adapt it for your particular problem. Hopes this helps you and best regards.

Example code: How to create tkinter canvas that allows a user to draw rectangle objects with a mouse.

import tkinter as tk

class App(tk.Frame):
    def __init__( self, parent):
        tk.Frame.__init__(self, parent)
        self._createVariables(parent)
        self._createCanvas()
        self._createCanvasBinding()

    def _createVariables(self, parent):
        self.parent = parent
        self.rectx0 = 0
        self.recty0 = 0
        self.rectx1 = 0
        self.recty1 = 0
        self.rectid = None

    def _createCanvas(self):
        self.canvas = tk.Canvas(self.parent, width = 800, height = 400,
                                bg = "white" )
        self.canvas.grid(row=0, column=0, sticky='nsew')

    def _createCanvasBinding(self):
        self.canvas.bind( "<Button-1>", self.startRect )
        self.canvas.bind( "<ButtonRelease-1>", self.stopRect )
        self.canvas.bind( "<B1-Motion>", self.movingRect )

    def startRect(self, event):
        #Translate mouse screen x0,y0 coordinates to canvas coordinates
        self.rectx0 = self.canvas.canvasx(event.x)
        self.recty0 = self.canvas.canvasy(event.y) 
        #Create rectangle
        self.rectid = self.canvas.create_rectangle(
            self.rectx0, self.recty0, self.rectx0, self.recty0, fill="#4eccde")
        print('Rectangle {0} started at {1} {2} {3} {4} '.
              format(self.rectid, self.rectx0, self.recty0, self.rectx0,
                     self.recty0))

    def movingRect(self, event):
        #Translate mouse screen x1,y1 coordinates to canvas coordinates
        self.rectx1 = self.canvas.canvasx(event.x)
        self.recty1 = self.canvas.canvasy(event.y)
        #Modify rectangle x1, y1 coordinates
        self.canvas.coords(self.rectid, self.rectx0, self.recty0,
                      self.rectx1, self.recty1)
        print('Rectangle x1, y1 = ', self.rectx1, self.recty1)

    def stopRect(self, event):
        #Translate mouse screen x1,y1 coordinates to canvas coordinates
        self.rectx1 = self.canvas.canvasx(event.x)
        self.recty1 = self.canvas.canvasy(event.y)
        #Modify rectangle x1, y1 coordinates
        self.canvas.coords(self.rectid, self.rectx0, self.recty0,
                      self.rectx1, self.recty1)
        print('Rectangle ended')


if __name__ == "__main__":
    root = tk.Tk()
    root.geometry( "600x400" )
    app = App(root)
    root.mainloop()

Overview of Steps and Methods Used:

1. Create a canvas widget in Tk() window using tk.Canvas() method
2. Bind mouse events <Button-1>, <ButtonRelease-1> and <B1-Motion> with their callbacks to tk.Canvas widget.
3. For each of these events:
   3.1 Convert mouse pointer screen x, y coordinates to canvas coordinates using methods .canvasx(event.x) and .canvasy(event.y) and store these converted corrdinates in variables self.rectx0, self.recty0, self.rectx1, self.recty1. event.x and event.y provides the mouse pointer screen coordinates.
   3.2 Use canvas method .create_rectangle(x0, y0, x1, y1, option, ...) to create rectangle or use canvas method .coords(tagOrId, x0, y0, x1, y1) to modify rectangle coordinates. Here, x0, y0, x1, y1 denotes the rectangle object's top left corner and bottom right corner x & y canvas coordinates, and tagOrId denoted the rectangle object ID.
   3.3 Only for <Button-1>, need to store the created rectangle object's ID in a variable. This variable provides the value to tagOrId whenever .coords() method is called during <B1-Motion> and <ButtonRelease-1>.