Kivy Chinese Tutorial Example Primer (Simple Paint App): 2. Implementing drawing capabilities

1. Understanding the Kivy coordinate system

In the previous section, Dr. Mi took you through the framework of the artboard program, as well as a basic custom widgets (widgets). At the end of the previous section, Dr. Mi left a study questions about the Kivy coordinate system for everyone. By clicking on the 4 corners of the window and observing the corresponding console output, we can infer that the coordinate origin of the kivy is in the lower left corner of the window, the x-axis is horizontally to the right, and the y-axis is in the upright direction. This is exactly the same as the plane Cartesian coordinates common in our high school math.

2. Draw Dots

Understanding the Kivy coordinate system, this section of Dr. Mi will teach you to achieve the core function of the simple artboard: drawing.

The emphasis needs to be modified by the On_touch_down method of Mypaintwidget, as well as by adding functions to import colors and paint at the beginning of the program (line 3rd). The modified code is as follows:

1  fromKivy.appImportApp2  fromKivy.uix.widgetImportWidgets3  fromKivy.graphicsImportColor, Ellipse4  5  6 classMypaintwidget (widgets):7     defOn_touch_down (self, Touch):8 With Self.canvas:9Color (1, 1, 0)TenD = 30. OneEllipse (pos= (touch.x-d/2, touch.y-d/2), size=(d, D)) A   -   - classMypaintapp (App): the     defBuild (self): -         returnMypaintwidget () -   -   + if __name__=='__main__': -Mypaintapp (). Run ()

Run the program, when you click on the window with the left mouse button, the program will draw a yellow dot in the mouse click position.

Line 8th with self< Span class= "Crayon-sy". canvas:&NBSP; Use the WITH statement to enter the canvas context of the custom widget (mypaintwidget). The widget's canvas (canvas) corresponds to the display area of the window part on the screen, and we can draw various shapes on it. After executing the 8th line of code, the subsequent drawing statements will draw a variety of shapes on this canvas. The With statement also ensures that when we exit the canvas context, the program automatically cleans up the internal state associated with the canvas and frees the appropriate resources.

Line 9th color (1< Span class= "Crayon-sy" >, 1 0) sets the color of the brush to yellow. Color uses RGB (red, green, blue) primaries to represent colors, and each color component has a value between [0, 1]. Here we mix red and green (1th, 2 parameters are 1), Reject Blue (3rd parameter is 0), according to the principle of three primary colors, we will get yellow. After you set the color, the subsequent drawing will use that color until you change the color again with the color function. It's like you dip a paintbrush in a yellow color (call the color function), and the pattern you draw is all yellow until you dip the other paint (call the color function again) to change the brush's colors.

Line 10th d = 30. Sets the diameter of the circle, and subsequent code draws a circle based on the value of the variable D. If we want to change the size of the circle, just modify the value of the variable D, which is also the flexibility of saving the circle's diameter to the variable.

Line 11thEllipse(Pos=(Touch.X - D / 2, Touch.Y - D / 2), Size=(D, D)Call the ellipse function at the location of the mouse click and draw a circle in the specified diameter. In the Ellipse function, the position of the circle is represented by a circular, circumscribed square. Where the 1th parameter pos represents the coordinates (x, y) of the lower-left corner of the tangent square, and the 2nd parameter, size, indicates the dimensions of the circumscribed square (width, height). We want the center to fall in the position of the mouse click, so the lower left corner of the corresponding tangent square coordinates(touch. X - D / 2, touch. Y - D / 2)

3. Draw lines

Next, we want to implement the function of dragging the mouse to draw the line. The code is as follows:

1  fromKivy.appImportApp2  fromKivy.uix.widgetImportWidgets3  fromKivy.graphicsImportColor, Ellipse, Line4  5  6 classMypaintwidget (widgets):7     defOn_touch_down (self, Touch):8 With Self.canvas:9Color (1, 1, 0)TenD = 30. OneEllipse (pos= (touch.x-d/2, touch.y-d/2), size=(d, D)) Atouch.ud[' Line'] = line (points=(touch.x, touch.y)) -   -     defOn_touch_move (self, Touch): thetouch.ud[' Line'].points + =[touch.x, Touch.y] -   -   - classMypaintapp (App): +     defBuild (self): -         returnMypaintwidget () +   A   at if __name__=='__main__': -Mypaintapp (). Run ()

After the program is running, the effect looks like this

Line 3rd from kivy. Graphics Import Color, Ellipse, Line We import the function lines to draw. The function line accepts a list of coordinates of a series of points, then draws lines between adjacent 2 points in turn.

The Touch.ud in line 12th is a Python dictionary (dict) that we can use to store data related to touch events. Whole line 12th.Touch.ud[ ' line ' ] = line (points= (touch. X, touch.y)

Line 14th def on_touch_move(self, touch): Added a new method On_touch_move. When the user drags the mouse, the function is triggered (the code in the function executes). A mouse drag usually triggers the On_touch_move method multiple times, which is equivalent to splitting a move into a number of tiny moves, and each move is passed to the On_touch_move method through the touch parameter.

Line 15thtouch. Ud[ ' line ' ].< Span class= "crayon-v" >points += [touch. X, touch.y

Original link: http://www.ipaomi.com/2017/11/16/kivy-Chinese tutorial-Getting started with an example-simple artboard-simple-paint-app:2-implementing the drawing function/

Kivy Chinese Tutorial Example Primer (Simple Paint App): 2. Implementing drawing capabilities