【canvas教程】实现画布拖动、定点缩放，支持手势与鼠标滚轮操作

效果展示：

实现原理：

1.求实现定点缩放所需的位移值

定点缩放：从图中选取某点（参照物）为中心点进行缩放，缩放时无论图像怎么变化，该点位置始终固定不变。

有想深入了解实现原理的，不妨试着做一下我下面出的一道题：

有一个长4000px、宽4000px的四方形ABCD，A点的坐标固定在(-2000,-2000)，该四边形上有一个点E，坐标为(-100,-300)，将该四方形复制一份并缩小到90%后，新四边形的A点坐标为多少时可使新四边形的E点与原四边形的E点重合？

2.求手势缩放的中心点

勾股定理：直角三角形两直角边为a和b，斜边为c，那么a²+b²=c²。

根据勾股定理求得两点间距离后，再求得两点间的中点坐标。

中点坐标 = (起点坐标) + (两点间距 / 2) = (终点坐标) - (两点间距 / 2)

实现代码：

<template>
	<view>
		<canvas
			id="gameCanvas"
			canvas-id="gameCanvas"
			disable-scroll
			style="width: 100vw;height: 100vh;"
			@touchstart="onTouchStart"
			@touchmove="onTouchMove"
		>canvas>
	view>
template>

监听Web端鼠标滚轮实现定点缩放

加入 mousewheel 监听鼠标滚轮事件后，在回调中直接调用 scaleCanvas 即可。

 
		onReady() {
			const sys = uni.getSystemInfoSync();
			this.viewWidth = sys.screenWidth;
			this.viewHeight = sys.screenHeight;
			this.canvasContext = uni.createCanvasContext('gameCanvas');
			this.drawImg();
			// 监听 PC 端鼠标滚轮
			if(sys.uniPlatform === 'web') {
				window.addEventListener('mousewheel', (e) => {
					this.scaleCanvas(e.deltaY > 0, e);
				});
			}
		},

其他说明：

1.如使用 ts 语法，在 import 图片时遇 `Cannot find module...` 错误，可在 `*.d.ts` 文件中添加 `declare module '*.jpg';` 

2.示例代码是基于 uniapp 框架实现。

3.其中画布拖动的代码是基于我上篇文章【canvas教程】绘制大图并实现画布拖动 ，如只实现拖动或区分拖动和缩放的代码可参考上篇文章。