Create a drawing canvas on app inventor that allows you to pick colour from all spectrum. In this app we will also add several drawing tools such as drawing straight line, circle, and rectangle. On top of that, you will be able to share your drawing through any other applications on your phone!
UI Components:
Horizontal Arrangement, Vertical Arrangement, Horizontal Scroll Arrangement, Button, Slider, Sharing, Canvas
All three sliders – Min value 0, Max value 255
Blocks
RGB Colour Mixing
All colours can be produced by combining red, green and blue. Each colour’s intensity is represented using a value between 0 and 255. In the project, three sliders are used to modify the intensity of each colour and when the value of any slider changed, we will display the resulting colour using the ColourButton and update the canvas paint colour at the same time.
Pen Tool
The variable tool is created to keep track of the drawing tool we are using so the functionality of each tool will not overlap. Update the tool variable when PenButton is clicked. When your user interacts with the canvas by dragging their finger on it, the Canvas.Dragged event will be triggered. Call the Canvas.DrawLine function if the tool in use is “pen”.
Eraser & Clear Tool
The clear button will clear the canvas which can be implement easily by simply calling the Canvas.Clear function.
In MIT App Inventor, there isn’t any function to erase paint on canvas. However, we can simulate the eraser effect by drawing lines with the paint colour set to the colour of your canvas.
Line Tool
Line tool is used to create a straight line on the canvas. First, use variables to store the coordinate when the user touch down on the canvas. When user release their touch on the canvas, join the coordinate at that point with the initial stored coordinate to form a line.
Circle Tool
To draw a circle using Canvas.DrawCircle function, we need to provide a value for circle radius. We will use the coordinate of touch down as the center of circle and the coordinate of touch up as the edge of circle. Then, calculate the radius by finding distance between two coordinates using formula below:
In this example, we created a function named calculateRadius, calculate the result and return it as an argument for the Canvas.DrawCircle function.
Rectangle Tool
Create a function named drawRectangle, that takes two diagonal points as arguments. We will able to create a rectangle using Canvas.DrawShape function by providing a list of all four points of a rectangle as below:
Share Drawing
When the function Canvas.save called, it will return the path where your drawing will be saved. We will then use the Sharing.ShareFile to share the file at the path.
Complete Program
