【canvas教程】实现画布拖动、定点缩放，支持手势与鼠标滚轮操作
发布时间：2023-07-24 16:00
效果展示：
![\"\"](\"https://img-blog.csdnimg.cn/eeb986fb64ee4fcc9332817620f00f15.gif\")
实现原理：
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>
<script>
import img from '@/static/images/demo.jpg';
export default {
canvasContext: null,
data() {
return {
/** 最小缩放百分比 */
minScale: 30,
/** 最大缩放百分比 */
maxScale: 100,
/** 单次缩放百分比增量 */
increaseScale: 5,
/** 缩放比例 */
scale: 1,
touchType: '',
start: {
x: 0,
y: 0
},
touches: [],
change: {
x: 0,
y: 0
},
/** 是否正在绘制 */
drawing: false,
// 视图宽度
viewWidth: 0,
// 视图高度
viewHeight: 0,
// 画布绘制的图像宽度
width: 4000,
// 画布绘制的图像高度
height: 4000
}
},
onReady() {
const sys = uni.getSystemInfoSync();
this.viewWidth = sys.screenWidth;
this.viewHeight = sys.screenHeight;
this.canvasContext = uni.createCanvasContext('gameCanvas');
this.drawImg();
},
methods: {
drawImg() {
// 拦截频繁绘制
if(this.drawing) return;
this.drawing = true;
var ctx = this.canvasContext;
// 改变坐标系原点
ctx.translate(this.change.x, this.change.y);
// 绘制图片
ctx.drawImage(img, 0, 0, this.width * this.scale, this.height * this.scale);
ctx.draw(false, () => {
this.drawing = false
});
},
/**
* 限制 x、y 拖动范围，禁止滑出边界
* @param {number} x
* @param {number} y
*/
checkRange(point) {
point.x = Math.min(Math.max(point.x, -this.width * this.scale + this.viewWidth), 0);
point.y = Math.min(Math.max(point.y, -this.height * this.scale + this.viewHeight), 0);
return point;
},
/**
* 缩放画布
* @param {boolean} reduce 是否缩小，否则为放大
*/
scaleCanvas(reduce, e) {
let last = this.scale;
let scale = Math.round(last * 100); // 转为整数计算，无精度丢失问题
if(reduce) { // 缩小 / 鼠标滚轮向下滚动
scale = scale > this.minScale ? scale - this.increaseScale : this.minScale;
} else { // 放大 / 鼠标滚轮向上滚动
scale = scale < this.maxScale ? scale + this.increaseScale : this.maxScale;
}
if(last !== scale / 100) {
this.scale = scale / 100;
this.start = { x: 0, y: 0 };
// 参考问题：有一个长4000px、宽4000px的四方形ABCD，A点的坐标固定在(-2000,-2000)，
// 该四边形上有一个点E，坐标为(-100,-300)，将该四方形复制一份并缩小到90%后，
// 新四边形的A点坐标为多少时可使新四边形的E点与原四边形的E点重合？
// 预期效果：从图中选取某点（参照物）为中心点进行缩放，缩放时无论图像怎么变化，该点位置始终固定不变
// 计算方法：以相同起点先计算缩放前后两点间的距离，再加上原图像偏移量即可
this.movingCanvas({
isScaled: true,
pageX: (e.pageX - this.change.x) * (1 - this.scale / last),
pageY: (e.pageY - this.change.y) * (1 - this.scale / last),
});
}
},
onTouchStart(e) {
this.start.x = e.touches[0].pageX;
this.start.y = e.touches[0].pageY;
this.touchType = '';
},
/**
* 计算两点间距
* @param {Object} touches
*/
getDistanceByTouches(touches) {
// 根据勾股定理求两点间距离
const a = touches[1].pageX - touches[0].pageX;
const b = touches[1].pageY - touches[0].pageY;
const c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
// 求两点间的中点坐标
// 1. a、b可能为负值
// 2. 在求a、b时，如用touches[1]减touches[0]，则求中点坐标也得用touches[1]减a/2、b/2
// 3. 同理，在求a、b时，也可用touches[0]减touches[1]，则求中点坐标也得用touches[0]减a/2、b/2
const x = touches[1].pageX - a / 2;
const y = touches[1].pageY - b / 2;
// return { a: Math.abs(a), b: Math.abs(b), c, x, y };
return { c, x, y };
},
onTouchMove(e) {
if(e.touches.length === 2) { // 双点触摸 / 缩放
if(this.touchType === 'scale') {
const start = this.getDistanceByTouches(this.touches);
const end = this.getDistanceByTouches(e.touches);
if(Math.abs(start.c - end.c) >= 10) { // 滑动多长距离触发缩放
this.touches = e.touches;
this.scaleCanvas(
start.c > end.c, // 两点间距变小=缩小
{
pageX: end.x,
pageY: end.y
}
);
}
} else {
this.touches = e.touches;
}
this.touchType = 'scale';
} else {
if(this.touchType === 'scale') {
// 从双点触摸变成单点触摸 / 从缩放变成拖动
this.start.x = e.touches[0].pageX;
this.start.y = e.touches[0].pageY;
this.touchType = 'move';
return;
}
this.movingCanvas(e.touches[0])
this.touchType = 'move';
}
},
movingCanvas(touche) {
let point = {
x: this.change.x + touche.pageX - this.start.x,
y: this.change.y + touche.pageY - this.start.y
};
this.checkRange(point);
if(touche.isScaled || this.change.x !== point.x || this.change.y !== point.y) {
this.change = point;
this.drawImg();
this.start.x = touche.pageX;
this.start.y = touche.pageY;
}
}
}
}
</script>监听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教程】绘制大图并实现画布拖动 ，如只实现拖动或区分拖动和缩放的代码可参考上篇文章。