fabric 鼠标滑动滚轮实现缩放Canvas-马育民老师

# 说明

### 哪些对象会缩放

缩放 Canvas 是指缩放里面的元素对象的宽高，Canvas本身宽高不会缩放

### 滚轮缩放比例

鼠标滚轮，向前滚一下是 `-100`，向后滚一下是 `100`。滚动一次时，缩放增加 `20%`，如：默认是 `100%`，向前滚动一次，放大 `120%`，再向前滚动一次，放大 `140%`；向后滚动同理

### 缩放跟随鼠标

下面代码没有设置缩放跟随鼠标

如果想要鼠标所在位置为原点进行缩放，去掉下面代码：

```
this.canvasFab.setZoom( this.zoom )
```

放开下面代码：
```
this.canvasFab.zoomToPoint(
  {
    // 关键点
    x: opt.e.offsetX,
    y: opt.e.offsetY
  },
  zoom // 传入修改后的缩放级别
)
```

### 代码

```
// 实现鼠标滚轮缩放，向上滚动放大20%，向下滚动缩小20%
this.canvasFab.on('mouse:wheel', (opt) => {
	const delta = opt.e.deltaY // 滚轮，向前滚一下是 -100，向后滚一下是 100
	const zoomOrigin = this.canvasFab.getZoom() // 获取画布当前缩放值
	let zoom = 0
	if(delta < 0){
		// 当缩小到0.01时，再放大，就设置为0.2，否则就是0.21，这不合理
		if(zoomOrigin == 0.01){
			zoom = 0.2
		}else{
			zoom = zoomOrigin + 0.2
		}
	}else{
		zoom = zoomOrigin - 0.2
	}
	if (zoom > 20) zoom = 20 // 限制最大缩放级别
	if (zoom < 0.01) zoom = 0.01 // 限制最小缩放级别
	
	this.zoom = Math.round(zoom*100)/100
	
	console.log("mouse:wheel:",delta,zoomOrigin,zoom,this.zoom)
	
	this.canvasFab.setZoom( this.zoom )
	
	// 以鼠标所在位置为原点缩放
	// this.canvasFab.zoomToPoint(
	//   {
	//     // 关键点
	//     x: opt.e.offsetX,
	//     y: opt.e.offsetY
	//   },
	//   zoom // 传入修改后的缩放级别
	// )
  })
```

参考：
https://blog.csdn.net/qq_42038997/article/details/142102659

原文出处：http://malaoshi.top/show_1IX8XmD5VDQT.html