vue3+ts+canvas 做canvas的放大与缩小

学习目标：

提示：本章内容是学习canvas的放大与缩小
注: canvas 在日常开发中有很多场景会用到，所以了解一些常用的API和方法是至关重要的。

例如：

• 项目中经常会用到canvas的放大与缩小功能。

---

学习内容：

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

例如：

1. 创建canvas
2. 获取canvas并转成平面2d图形
3. 点击按钮来实现放大或者缩小canvas
4. 放大或缩小canvas的实际比例

---

实现思路：

如下所示：

• 1. 在父组件中引入canvas子组件 并用ref来获取
     
• 2. 在canvas子组件中定义函数来
     // 放大
     const zoomDa = (rote: number) => {
     heights.height = heights.height * rote
     heights.width = height.width * rote
     }
     // 缩小
     const zoomXiao = (rote: number) => {
     heights.height = heights.height / rote
     heights.width = heights.width / rote
     }
• 父组件引用子组件方法 // 这里就是放置按钮的地方
  // 放大与缩小
  const zoomIn = () => {
  RefImgCanvas.value?.zoomDa(1.2)
  }

---

学习产出：

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

其他canvas相关api：

• 利用canvas进行矩形绘制rect
• 利用canvas进行绘制线条Line
• 利用canvas进行拖拽面板等…