preamble (of speeches, articles etc)
Although in actual development we rarely bother with flowcharts
Even if we need to, we'll go through a 3rd party plugin to do so
Below we will simply implement a very small part of the flowchart
Drawing Rectangles Manually
Ideas for drawing a rectangle
Here we draw the rectangle
The (x,y, w, h) method will be used to draw a stroked rectangle.
x: x-axis coordinate of the starting point of the rectangle.
y: y-axis coordinate of the starting point of the rectangle.
width: the width of the rectangle. Positive values are on the right, negative values on the left.
height: the height of the rectangle. Positive values go down, negative values go up.
Note the positive and negative values of the w,h parameters.
If w,h is negative, there are 2 diagonally symmetric rectangles.
Draw a static rectangle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <meta name="viewer"> <header>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>.
html,body{
/* Remove browser's built-in margin */
margin: 0;
/* spread across the page */
height: 100%;
height: 100%; width: 100%;
}
</style>.
</head>.
<body>
<canvas > </canvas> </canvas>
</body> <script>.
<script>
// Get the canvas element
let canvasEle = ('canvas')
// Get the context of the canvas
const ctx = ('2d')
// Set the size (width and height) of the canvas to be the same width as the screen.
const screenSize =
const screenSize =
const screenSize = =
// Set the color of the rectangle, make sure to set the color before drawing or it won't take effect.
= '#a0a'
// Draw a rectangle in path mode with start coordinates 100,100, width 300, height 280.
(100,100,300,280)
</script>
</html>
The basic idea of drawing rectangles manually
With the above we have implemented static drawing of rectangles.
If we want to manually animate a rectangle, we need to implement the following steps
1. Register the mouse press event to the canvas, and record the starting coordinates of the rectangle (x,y) when it is pressed.
At the same time, it is also necessary to register the mouse move event and the lift event when pressed.
2. Get the width and height of the rectangle by calculating it while the mouse is moving.
When calculating the width and height of a rectangle, we want to use absolute values for the calculation.
Drawing rectangles immediately after calculation
3. Remove the previously registered mouse move event and lift event when the mouse is lifted.
Drawing Rectangles Manually
<script>
// Get the canvas element oCan
let canvasEle = ('canvas')
// Get the context of the canvas
const ctx = ('2d')
// Set the size (width and height) of the canvas to be the same width and height as the screen
const screenSize =
const screenSize =
= =
// All the rectangle information
let rectArr = []
// Register the canvas with the event mousedown
('mousedown',canvasDownHandler)
function canvasDownHandler(e){
('pressed', e)
rectArr = [, ]
// The move event needs to be registered when you press
('mousemove', canvasMoveHandler)
// Lift event
('mouseup', canvasMouseUpHandler)
}
// When we move we need to record the start and end points and then we can draw the rectangle
function canvasMoveHandler(e){
('We're moving', e)
// Start drawing the rectangle as soon as it's moved
drawRect(rectArr[0], rectArr[1], , )
}
function drawRect(x1,y1,x2,y2){
// When calculating the width and height of the rectangle, we need to use absolute values to do the calculation
// The width and height of the rectangle is the coordinates of the move at this moment minus the coordinates of the first press.
// If you don't use absolute values, you may end up with two rectangles
let rectWidth = (x2-x1)
let rectHeight = (y2-y1)
// Store the coordinates of the rectangle
rectArr = [x1,y1,rectWidth,rectHeight]
(... . rectArr)
}
// When we lift the mouse, we remove the previously registered move and lift events.
function canvasMouseUpHandler(){
('mousemove', canvasMoveHandler)
('mouseup', canvasMouseUpHandler)
}
</script>
Finding problems appearing redundant paths
With this image above, we drew the rectangle manually though.
But duplicate paths appear.
Let's first analyze the reason for the occurrence of duplicate paths.
We draw rectangles during each move.
As long as we clear the rectangle before drawing isn't that a solution to this problem
Let's try it.
Remove redundant paths before plotting
function drawRect(x1,y1,x2,y2){
// To calculate the width and height of the rectangle, we need to use absolute values.
// The width and height of the rectangle is calculated by subtracting the coordinates of the first press from the coordinates of the move at this point in time.
let rectWidth = (x2-x1)
let rectHeight = (y2-y1)
// Store the coordinates of the rectangle
rectArr = [x1,y1,rectWidth,rectHeight]
// We empty the rectangle before drawing it, and then we draw it so that there are no extra paths
(0,0, , )
// Redraw the rectangle
(... .rectArr)
}
The resourceful little one noticed the problem?
As some of you witty fellows have discovered.
If I start at the bottom right corner and end at the top left corner.
I.e.: the user drags from (900, 1000) to (50, 50).
Wouldn't it be a problem to draw the rectangle in this direction?
Problems do arise.
The rectangle drawn at this point will not follow our direction. Look at the following diagram
How can this be dealt with?
The protagonist shines.
(x,y,w,h) This method creates a rectangular path
x: x-axis coordinate of the starting point of the rectangle.
y: y-axis coordinate of the starting point of the rectangle.
width: the width of the rectangle. Positive values are on the right, negative values on the left.
height: the height of the rectangle. Positive values go down, negative values go up.
This method creates a rectangular path, and the created path is not drawn directly on the canvas.
A call to stroke() or fill() is required to display on the canvas.
Drawing Rectangular Paths with
function drawRect(x1,y1,x2,y2){
let rectWidth = (x2-x1)
let rectHeight = (y2-y1)
// Clear the path of the rectangle created by the previous real-time movement before drawing it.
(0,0, , )
// Start drawing the line
(); // Draw the path rectangle.
// Draw the path rectangle
((x1, x2), (y1, y2), rectWidth, rectHeight); // Draw the outline of the shape.
// Draw the outline of the shape.
();
}
Similarities and differences
Difference 1 Functionality: :Draws the border. Creates a path to the rectangle (not drawn immediately on the rectangle)
Difference 2 Immediacy: is drawn immediately. is not drawn immediately, you need to call stroke() or fill() to draw it
Same point:
1. are drawing rectangles
2. Accept the same parameters
3. are through the strokeStyle (color) and lineWidth (line thickness) and so on to set the style
Drawing multiple rectangles in succession
function drawRect(x1,y1,x2,y2){
let rectWidth = (x2-x1)
let rectHeight = (y2-y1)
let endX = (x1, x2)
let endY = (y1, y2)
// Empty the path of the rectangle created by the previous real-time movement before drawing it.
(0,0, , )
// Draw the rectangles stored in the beforeRectArr array.
allRectInfoArr = [endX, endY, rectWidth, rectHeight]
(0,0, , )
(element => {
();
(... .element)
();
}).
// Start the current path
(); // Start this path.
// Draw the current rectangular path
(... .allRectInfoArr); // Start filling the rectangle.
// Start filling the rectangle
();
}
// Remove the previously registered move and lift events when we lift the mouse.
function canvasMouseUpHandler(){
savaBeforeRect()
('mousemove', canvasMoveHandler)
('mouseup', canvasMouseUpHandler)
}
function savaBeforeRect(){
(allRectInfoArr)
}
All Codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <meta name="viewer"> <header>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>.
html,body{
/* Remove browser's built-in margin */
margin: 0;
/* spread across the page */
height: 100%;
height: 100%; width: 100%;
}
</style>.
</head>.
<body>
<canvas > </canvas> </canvas>
</body> <script>.
<script>
// Get the canvas element oCan
let canvasEle = ('canvas')
// Get the context of the canvas
const ctx = ('2d')
// Set the size (width and height) of the canvas to be the same width and height as the screen
const screenSize =
const screenSize =
const screenSize = =
// Set the color of the rectangle
// = '#a0a'
// // Draw a rectangle in path mode with start coordinates 100,100, width 300, height 280.
// (100,100,400,280)
// Rectangle information
let rectArr = []
// All rectangle info
allRectInfoArr = []
let beforeRectArr = []
// Register the event mousedown with the canvas
('mousedown',canvasDownHandler)
function canvasDownHandler(e){
rectArr = [, ]
// The move event needs to be registered when you press
('mousemove', canvasMoveHandler)
// Lift event
('mouseup', canvasMouseUpHandler)
}
// When we move we need to record the start and end points and then we can draw the rectangle
function canvasMoveHandler(e){
// Start drawing the rectangle as we move.
drawRect(rectArr[0], rectArr[1], , )
}
function drawRect(x1,y1,x2,y2){
let rectWidth = (x2-x1)
let rectHeight = (y2-y1)
let endX = (x1, x2)
let endY = (y1, y2)
// Empty the path of the rectangle created by the previous real-time movement before drawing it.
(0,0, , )
// Draw the rectangles stored in the beforeRectArr array.
allRectInfoArr = [endX, endY, rectWidth, rectHeight]
(element => {
();
(... .element)
();
}).
// Start the current path
(); // Start this path.
// Draw the current rectangular path
(... .allRectInfoArr); // Start filling the rectangle.
// Start filling the rectangle
();
}
// Remove the previously registered move and lift events when we lift the mouse.
function canvasMouseUpHandler(){
savaBeforeRect()
('mousemove', canvasMoveHandler)
('mouseup', canvasMouseUpHandler)
}
function savaBeforeRect(){
(allRectInfoArr)
}
</script>
</html>
coda
If the guys think my writing is good
Can I get a like? Thanks a lot.
To be continued later.
How to select the rectangle and change the size of the rectangle.
How to add text to a rectangle.
How to draw circles, arrow symbols, etc.