vue3+ts+canvas does canvas enlargement and reduction

learning target:

提示：本章内容是学习canvas的放大与缩小
Note: Canvas is used in many scenarios in daily development, so it is crucial to understand some common APIs and methods.

For example:

• The zoom-in and zoom-out functions of canvas are often used in projects.

---

Learning Content:

提示：本章以canvas的放大与缩小为例

For example:

1. Create canvas
2. Get the canvas and convert it into a flat 2D graphic
3. Click the button to zoom in or out of the canvas
4. Enlarge or reduce the actual proportion of the canvas

---

Implementation ideas:

As follows:

• 1. Introduce the canvas subcomponent into the parent component and use ref to obtain it
     
• 2. Define a function in the canvas subcomponent to
     // Zoom in
     const zoomDa = (rote: number) => { heights.height = heights.height * rote heights.width = height.width * rote } // Zoom in const zoomXiao = (rote: number) => { heights.height = heights.height / rote heights.width = heights.width / rote }
     
     
     
     
     
     
     
     
• The parent component refers to the child component method // This is where the button is placed
  // Zoom in and out
  const zoomIn = () => { RefImgCanvas.value?.zoomDa(1.2) }
  
  

---

Learning output:

提示：以上代码就可以实现canvas的放大与缩小

Other canvas related APIs:

• Use canvas to draw rectangle
• Use canvas to draw lines Line
• Use canvas to drag and drop panels, etc...