Using the tkinter canvas to draw shapes, text and widgets

the next widget I want to cover is a canvas and a canvas is essentially a widget that allows us to draw various shapes for example we could draw a square a circle lines text and quite a few more elements in the most basic sense what we are doing is we are recreating paint inside of key Kinder or at the very least we have the basic tools to do so I already have prepared some code the only difference compared to what we've seen in the past is I do not have ttk I only have TK because that's all I need but if I run this code you can see we have a basic window I want to create a canvas which is one specific kind of widget this I want to store in a variable that I'm also going to call canvas and in here we need TK and can this like any other widget this is going to need a master which is going to be my window once I have that I can pack this canvas and if I run the code now we can't see anything however the widget does exist the problem is by default it's well invisible we can change that the easiest way to do so is by giving it a background in here you could choose basically any color for example I could use white in here if I run it now we can now see a white background this would work with any other color red for example would look like this there are quite a few more colors you could be using but I'm going to cover them later but now using basic names is fine and I'm going to stick with white that's I think the easiest color to work with with that all we really have to do is go through the different methods that the canvas object has for example one that I think is very simple is called create rectangle this for the first argument is going to need a tuple and this Tuple is going to determine the dimensions of the rectangle we are going to draw to make this work we need the left point the top point the right point and the bottom point let me actually use values here for the left I want to go with 0 and for the top I also want to go with 0. or the right side I want to have 100 pixels and for the bottom I want to have 200 pixels and now if I run this we can see we have a kind of rectangle or at least the outline of one a better way to visualize this is changing these numbers to 50 and 20 that is a bit easier to see so what we have here is a rectangle or the outline of a rectangle and this one is 50 pixels from the left this side here then we have 20 pixels from the top that's this part here the right side this one here is this line and then the bottom 200 is down here we are defining the four sides of this rectangle and the Kinder uses that to create a rectangle another option we have to make this look a bit better is a fill color and for this one again you could use basically any kind of color for example red would be fine and now we have a red rectangle with a black outline if you want to get rid of the outline you would set with to zero width here refers to the Border width if I run this now we only have a red rectangle and well basically now we have a ton of different options that we could be using the best website for that let me open it this one here it's a little bit old but it still works perfectly fine on this side you have a canvas widget and the canvas widget you can see has a ton of different options the one I have looked at already or the one we're working with right now is create rectangles you can already see in there we have canvas then create rectangle and then left top right and bottom and then the different options the different options you can find here and you can see there are a lot I could for example set the width to 10 this one gives us a very thick border and besides that I can also specify a dash in here we need a tuple that specifies what is called a dash pattern let me use some random numbers if I run this now we get a certain kind of Dash what this Dash here means is the first number the one in my case tells me how long each Dash should be and the second number two in this case is how big the Gap is which in this case is going to be twice as wide as the actual pixel if I change this to let's say four and two and run this again we now have a slightly different look this is something you have to play around with quite a bit to really get the idea you could even add more values in here let me add a one and a one run this again and now we get even weirder results but mastering the dash pattern is well something that I'm not too concerned about so do this in your own time if you are really interested another option we have is the outline this determines the color of the Border in here once again we need just a color and now we have a green outline I think at this point you get the idea with this thing it's not terribly complicated and if you go through the list it's quite easy to work with which means I can work with another one another very simple option is called canvas and create line you might already guess what this one is doing it draws a line and then here we need start X and start Y and then end X and end Y and other than that we still have basically the same options we have seen for the rectangle let's say I want to go from 0 and 0 to position 100 on X and 150 on y if I run this now you can see we have a line oh and I forgot to mention right now I've just used numbers you could also place all of this inside of a tuple you would get the same result the same applies to the rectangle you could just have the numbers and everything would still work just fine I just think using a tuple here makes it a bit easier to read and for the line we could for example use fill again let's fill this one with yellow also a little bit hard to see yeah it's gonna be very hard to see let's go with blue that is much easier to see besides that we also have canvas and create oval this one works quite similar compared to the rectangle we are specifying the left the top the right and the bottom and then TK enter is going to draw a circle or rather an oval inside of these limitations although if you have a rectangle with these Dimensions so if I go 0 0 100 and 100 we are going to have a circle like this I want to fill this one let's say with green there we go we have a circle right now but if I change this 100 to a 300 we have a oval I'm going to change this to 200 so we're not drawing too many things on top of each other also I want to turn the coordinates into a tuple to keep things a bit more consistent besides that we also have a create polygon for this polygon I'm going to do all of this inside of a tuple we always need X and Y positions so we have X1 and y1 then we have X2 and Y2 then we have X3 and Y free and tikenter is going to connect all of them so once again let me go with a point at zero and zero then I want to have another point at 100 and 200 and let's say a point at 350. running this now we have a triangle because the point we have drawn consists of three points so let me visualize this our first point is zero and zero that is the point up here the next point is 100 and 200 which means we're going 100 pixels to the right and we are going 200 pixels down the final point is 350 so we are going 300 pixels to the right and 50 pixels down and we're ending up on this point which you could see better if I remove the drawing this point here and in here you could add as many points as you want you can also work with fill let's say fill we haven't used white yet and for another point I want to have for x 150 and you could also work with negative points let's say negative 50. okay that um it works but it's very hard to see let's go with gray there we go now we have a polygon on top of everything else there's one more basic method I do want to cover but at this point this becomes fairly repetitive I want to create an arc for the arc we basically start like we have started for the oval which means I want to put them like this or these methods we are drawing always a rectangle and then we're filling the rectangle either with a rectangle itself an oval or now an arc so a partial oval essentially to visualize this let me actually copy this circle here or the coordinates for the circle and I also want to comment out the polygon so we can see what's going on if I run the code now you can see something weird on the circle the green bit here is the circle and on top of that we have this slice cut out if I fill the arc this is going to be even more visible let's say fill with red I can see by default The Arc covers one quarter of the entire Square these numbers you can specify for that you need is start point and this by default is zero which means if I run this thing now nothing changes however if I change this to a 45 now the thing looks like this the way you can understand this number is this line here is angle zero and a whole circle around this well circle is 360 degrees with this line here being 45 degrees what we have specified here for the start point and by default The Arc goes counterclockwise by 90 degrees this we can also change for that we need another argument here that is called extend by default this one is 90 so if I run it nothing changes if I however change it to 180 degrees it looks like this we are starting here at 45 degrees and then we're going 180 degrees around the circle so this point down here is degree 225 besides that there is one more interesting argument in here and that is called Style in here we have to specify specific tender options this could for example be TK and now all in capital letters Pi slice and let me fix the typo like so if I run this we cannot see any difference because this is the default option however what we can do is change this to Arc and if I run this now you can't see anything because the arc only draws the Border if however I change the outline which is the Border color to let's go with yellow run this again now you can see very faintly there's a yellow half circle again for this one I want to change the width to 10 so we can see it easily there we go now it's a bit more visible let me actually change the color to Red there we go now this is much more visible also I want to put all of this over multiple lines otherwise this is going to be quite hard to read there we go these are basically the main options you can work with besides Arc and Pi slice you also have chord running this gets us something like this I am messing this up with the width let me change this to one the difference compared to a pi slice right now is kind of hard to see because we are drawing half a circle let me change this to a smaller number let's say 140 and I want to go with pi slice running this now I get part of a slice the part that chord is going to change is it's going to take away this bit here it's going to be easier if I actually use it so instead of Pi slice I want to have the chord now we can see we are not drawing this bit here anymore that's the only difference between the two and with that we have an arc and this covers another really important part besides that you can also I want to comment out everything so you can see things a bit easier besides all the shapes you can also draw a text with canvas and create text for this one you have to start with a position let me go with 0 and 0. and then a text argument this is some text if I run this now we can see some parts of a text all the way in the top left up here the problem we have with the coordinate right now is this point here 0 and 0 is this point but we are placing the center of the text which means the actual bounding rectangle of the text looks something like this which is fine in general but right now it doesn't help us too much I'm going to change these numbers to 100 and 200 and there we go now we can see this is some text and once again you can also fill this thing with different colors let's go with green now we have some green text another option we could be using is with and this specifies the width of the text if I change this to a 10. now the width of the text is 10 and tikanta tries to fit everything inside of this width which means we have a ton of line breaks and once again if you go through the list you can find a few more options but those are the main ones you could also change the font or if the text is Justified or not there are quite a few different things you can do here the last important thing that you really want to care about is you can also display widgets with a canvas which is a super powerful feature let me use it we need canvas and this is called create window for this first of all we need a position this is just X and Y let me go with 50 and 100. now we need a window argument and important here this window has nothing to do with this window up here they just happen to be called the same the idea is inside of this canvas we are creating a separate tkinder window and this we are using for drawing and drawing a widget specifically and this window once a teak into a widget for example ttk dot label and with this I realized I do actually in ttk so let me import it all the way at the top from tkinter import ttk I should check my notes a bit better for this one we now need a master which doesn't really matter but we still need it and then we need some text or the text this is text in a canvas this one we don't have to pack if I run this now we have this is text and a canvas and once again we are placing the center of this widget which is 50 pixels from the left since the text itself is wider than that we are going a bit outside of the bounding box which is totally fine to do just be aware of it and widgets for some reason aren't being clipped off they are still visible I have no idea why it's just the way it works I'm going to change this 50 to 150 and now this looks a bit better and this is actually quite interactive for example besides the label we could also use a button and this would still work you could even press on the button and execute functions all of this works perfectly fine as a matter of fact for scrolling through a window you want to use this method here for the more advanced parts we are going to see this quite a bit it's super useful and with that we basically have all that we need for the basic canvas widget I'm going to comment this one out as well and now I want to do an exercise that I think is going to be quite fun I want you guys to use event binding along with the canvas to create a basic paint app so wherever the mouse is I want to draw something so when you move the mouse around you can see a line being drawn so pause the video now and try to figure this one out for this one I as always want to get my canvas and I want to bind an event the event I'm looking for is called motion which means I am checking for a movement of my mouse and if that is the case I want to draw on canvas this function doesn't exist right now so let's create it Define draw on canvas in here remember for the parameter we are always going to need one for the event from this event we can get an X and A Y position so X is going to be event dot X and Y is going to be event dot y and these points we can use to draw on the canvas although for that I want to have one more thing and that is the brush size I'm going to use this in a bit again so I want to Define this as a global variable brush size and let's go with four now that I have that I can get my canvas and create an oval we need a left a top a right and a bottom let's say this point here is the mouse cursor I'm going to call it m around this point I want to draw a circle every time we are moving the mouse and this point is going to need four different Arguments for the left side I want to go from the mouse position and then half the brush width which in our case is going to be 4 over 2. or this number here divided by 2. that is going to give us the left position the same thing I want to do for the top for this one I want to go up by 4 over 2 and for the right side I also want to go by 4 over 2 that way the entire width of the thing is 4 pixels which is our brush size I want to get x minus my brush size over 2. the same thing for y except now we need Y which is going to be the brush size divided by 2 again or the right side I want to have X and then plus my brush size over 2 and finally for the bottom I want to have y That's my brush size over 2. that is all I need if I run the code now and I hover over the canvas widget we have a very basic drawing app it doesn't look terribly good but at the very least it is working one issue we have right now is that we are only redrawing the outline let me fill this thing with a black color and now this is already looking a little bit better I think the brush size is also a tiny bit large I can change this to a two and this is improving as well but well this is a very basic drawing app and you can see here if I move the mouse really fast you can see the individual points we are drawing besides that another cool thing that I realized you can do is I also want to create a canvas method with bind and this one is going to be called Mouse wheel if I'm using that I want to get a brush size adjust function I'm going to create this here and this is going to be brush size adjust as always this needs the event and for this one I want to update this brush size which means I have to create a global variable that is called brush size and when we are doing this let me print the event to see what we get if I now use my mouse wheel we're getting a couple of different arguments the one I care about is called Delta if I move my mouse bit forwards it's going to be plus 120 and if I move it towards me it's negative 120 or backwards I guess for your mouse these numbers might be slightly different but the actual number doesn't matter I only care that it's positive or negative which means I can use this inside of an if statement so if the event dot Delta is greater than zero then I want to increase my brush size let's say brush size plus equal four and else if it is negative then brush size negative equal four with that if I run this again and let me actually show my mouse that's going to make all of this a bit easier to see your drawing still works but now if I scroll forward we have a much thicker Mouse and if I scroll towards me this becomes very very small although he can see an issue I am scrolling just towards me and the number gets smaller and smaller let me actually start this again so right now the line is very thin but now I'm scrolling towards me so the line should get smaller I'm scrolling quite a bit towards me and more and more towards me and the line just gets thicker the reason for that is when we're using the brush size here or these numbers it doesn't really matter if the number is positive or negative the larger the number gets or rather the larger the absolute number becomes the larger the circle is going to be which means as far as the brush is concerned 20 is the same size as negative 20 or almost the same they're slightly different but the larger the number itself the larger the brush size this I don't like which means at the end of this function I want to get my brush size and I want to limit it between two values for that we can use minimum and this is going to pick the smaller numbers between two arguments so in here I can have my brush size and the maximum number I want to have is going to be 50. so let me run this again and now I'm scrolling forward and this is the largest size that I can have for my brush kind of hard to see but it definitely works this function I want to wrap inside of a Max function this one works like minimum except this one selects the larger number and then here I want to have a zero that way our brush can never go below zero if this number becomes negative the max always chooses the zero so now I can run this again and I can increase the size and I can decrease it and at the minimum we get this line here and that is a nice basic paint app you could play around with this quite a bit more to add colors and we are going to do that later but for now I think this is a pretty good start with the canvas app

Channel: Atlas

Views: 15,085

Keywords:

Id: 52NXldtvOnE

Length: 24min 33sec (1473 seconds)

Published: Wed Dec 07 2022