renyt/canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

移动处理

Browse Source
This commit is contained in:
sunmeng 2025-08-07 18:03:26 +08:00
parent a99e07d5fb
commit 4aa49ccbde
10 changed files with 71 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
pages/index/gesture-canvas-page.vue
View File

@ -42,8 +42,8 @@ export default {
data() { data() {
return { return {
canvasWidth: 300, canvasWidth: 800,
canvasHeight: 300, canvasHeight: 600,
transformMatrix: new TransformMatrix(), transformMatrix: new TransformMatrix(),
gestureHandler: null, gestureHandler: null,
containerRect: null, containerRect: null,
@ -151,10 +151,9 @@ export default {
this.updateCanvas(); this.updateCanvas();
return; return;
} }
// 重新处理当前事件 // 直接传递原始事件，手势处理器会处理坐标转换
if (this.gestureHandler) { this.gestureHandler.catchEvent(event);
return this.handleTouchEvent(event);
}
// 如果是简单处理器，使用下面优化的基础处理方法 // 如果是简单处理器，使用下面优化的基础处理方法
if (!this.at) { if (!this.at) {
// 使用优化后的基础处理方法 // 使用优化后的基础处理方法

28
pages/index/gesture-handler.js
View File

@ -163,20 +163,26 @@ class GestureHandler {
} }
// 基础平移手势处理 // 基础平移手势处理
_handlePan(touch) { _handlePan(touch) {
const pointX = touch.x || (touch.clientX - this.containerRect.left); // 获取容器坐标系坐标（统一计算方法）
const pointY = touch.y || (touch.clientY - this.containerRect.top); const getPoint = (t) => ({
x: t.x || (t.clientX - this.containerRect.left),
y: t.y || (t.clientY - this.containerRect.top)
});
if (this.lastPoint) { const currentPoint = getPoint(touch);
// 基于容器坐标系的增量计算
const dx = pointX - this.lastPoint.x;
const dy = pointY - this.lastPoint.y;
// 使用真实增量，不需要缩放修正 if (this.lastPoint) {
this.transformMatrix.translate(dx, dy); // 计算增量（使用容器坐标系）
} const dx = currentPoint.x - this.lastPoint.x;
const dy = currentPoint.y - this.lastPoint.y;
// 存储当前点 (容器坐标系) // 应用平移变换
this.lastPoint = {x: pointX, y: pointY}; this.transformMatrix.tx += dx;
this.transformMatrix.ty += dy;
}
// 存储当前点
this.lastPoint = currentPoint;
} }
// 基础缩放手势处理 // 基础缩放手势处理

36
pages/index/transform-canvas.vue
View File

@ -32,10 +32,10 @@ export default {
canvasContext: null, canvasContext: null,
image: null, image: null,
dpr: 1, dpr: 1,
canvasDisplayWidth: 300, // 默认显示尺寸 canvasDisplayWidth: 800, // 默认显示尺寸
canvasDisplayHeight: 300, canvasDisplayHeight: 600,
canvasActualWidth: 300, // 实际像素尺寸 canvasActualWidth: 800, // 实际像素尺寸
canvasActualHeight: 300 canvasActualHeight: 600
}; };
}, },
watch: { watch: {
@ -58,15 +58,12 @@ export default {
immediate: true immediate: true
}, },
matrix: { matrix: {
deep: true, deep: true,
handler() { immediate: true, // 添加立即触发
this.$nextTick(() => { handler() {
if (this.canvasContext) { this.$nextTick(this.redraw); // 确保在下一个tick重绘
this.redraw(); }
} },
});
}
}
}, },
mounted() { mounted() {
this.initCanvas(); this.initCanvas();
@ -136,6 +133,7 @@ export default {
// 重置为初始状态 // 重置为初始状态
this.ctx.resetTransform(); this.ctx.resetTransform();
console.log(this.canvasActualWidth, this.canvasActualHeight,'123123123123')
this.ctx.clearRect(0, 0, this.canvasActualWidth, this.canvasActualHeight); this.ctx.clearRect(0, 0, this.canvasActualWidth, this.canvasActualHeight);
// 应用设备像素比缩放 // 应用设备像素比缩放
@ -156,12 +154,12 @@ export default {
); );
} else { } else {
// 图片加载失败的占位图 // 图片加载失败的占位图
this.ctx.fillStyle = '#f0f0f0'; // this.ctx.fillStyle = '#f0f0f0';
this.ctx.fillRect(0, 0, this.width, this.height); // this.ctx.fillRect(0, 0, this.width, this.height);
this.ctx.fillStyle = '#999'; // this.ctx.fillStyle = '#999';
this.ctx.textAlign = 'center'; // this.ctx.textAlign = 'center';
this.ctx.textBaseline = 'middle'; // this.ctx.textBaseline = 'middle';
this.ctx.fillText('图片加载失败', this.width / 2, this.height / 2); // this.ctx.fillText('图片加载失败', this.width / 2, this.height / 2);
} }
// 恢复上下文状态 // 恢复上下文状态

2
unpackage/dist/dev/.sourcemap/mp-weixin/pages/index/gesture-canvas-page.js.map vendored
View File

@ -1 +1 @@
{"version":3,"file":"gesture-canvas-page.js","sources":["pages/index/gesture-canvas-page.vue?type=page"],"sourcesContent":["import MiniProgramPage from '/Users/sunmeng/Desktop/wx/canvas/pages/index/gesture-canvas-page.vue'\nwx.createPage(MiniProgramPage)"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,GAAG,WAAW,eAAe;"} {"version":3,"file":"gesture-canvas-page.js","sources":["pages/index/gesture-canvas-page.vue?type=page"],"sourcesContent":["import MiniProgramPage from '/Users/sunmeng/Desktop/wx/canvas/pages/index/gesture-canvas-page.vue'\nwx.createPage(MiniProgramPage)"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,GAAG,WAAW,eAAe;"}

2
unpackage/dist/dev/.sourcemap/mp-weixin/pages/index/gesture-handler.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
unpackage/dist/dev/.sourcemap/mp-weixin/pages/index/transform-canvas.js.map vendored
View File

@ -1 +1 @@
{"version":3,"file":"transform-canvas.js","sources":["/Users/sunmeng/Desktop/wx/canvas/pages/index/transform-canvas.vue?type=component"],"sourcesContent":["import Component from '/Users/sunmeng/Desktop/wx/canvas/pages/index/transform-canvas.vue'\nwx.createComponent(Component)"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,GAAG,gBAAgB,SAAS;"} {"version":3,"file":"transform-canvas.js","sources":["/Users/sunmeng/Desktop/wx/canvas/pages/index/transform-canvas.vue?type=component"],"sourcesContent":["import Component from '/Users/sunmeng/Desktop/wx/canvas/pages/index/transform-canvas.vue'\nwx.createComponent(Component)"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,GAAG,gBAAgB,SAAS;"}

4
unpackage/dist/dev/mp-weixin/common/vendor.js vendored
View File

@ -6880,9 +6880,9 @@ function initOnError() {
}; };
} }
function initRuntimeSocketService() { function initRuntimeSocketService() {
const hosts = "127.0.0.1,172.10.0.205"; const hosts = "127.0.0.1,172.10.0.226";
const port = "8090"; const port = "8090";
const id = "mp-weixin_Z7-NJ2"; const id = "mp-weixin_YSvwpn";
const lazy = typeof swan !== "undefined"; const lazy = typeof swan !== "undefined";
let restoreError = lazy ? () => { let restoreError = lazy ? () => {
} : initOnError(); } : initOnError();

10
unpackage/dist/dev/mp-weixin/pages/index/gesture-canvas-page.js vendored
View File

@ -9,8 +9,8 @@ const _sfc_main = {
}, },
data() { data() {
return { return {
canvasWidth: 300, canvasWidth: 800,
canvasHeight: 300, canvasHeight: 600,
transformMatrix: new pages_index_transformMatrix.TransformMatrix(), transformMatrix: new pages_index_transformMatrix.TransformMatrix(),
gestureHandler: null, gestureHandler: null,
containerRect: null, containerRect: null,
@ -96,9 +96,7 @@ const _sfc_main = {
this.updateCanvas(); this.updateCanvas();
return; return;
} }
if (this.gestureHandler) { this.gestureHandler.catchEvent(event);
return this.handleTouchEvent(event);
}
if (!this.at) { if (!this.at) {
if (correctedEvent.touches.length === 1) { if (correctedEvent.touches.length === 1) {
this.handlePan(correctedEvent.touches[0]); this.handlePan(correctedEvent.touches[0]);
@ -113,7 +111,7 @@ const _sfc_main = {
const correctedTouches = Array.from(event.touches).map((touch) => { const correctedTouches = Array.from(event.touches).map((touch) => {
const x = touch.clientX - this.containerRect.left; const x = touch.clientX - this.containerRect.left;
const y = touch.clientY - this.containerRect.top; const y = touch.clientY - this.containerRect.top;
common_vendor.index.__f__("log", "at pages/index/gesture-canvas-page.vue:182", `原始坐标: (${touch.clientX}, ${touch.clientY}) 修正后: (${x}, ${y})`); common_vendor.index.__f__("log", "at pages/index/gesture-canvas-page.vue:181", `原始坐标: (${touch.clientX}, ${touch.clientY}) 修正后: (${x}, ${y})`);
return { return {
...touch, ...touch,
x, x,

16
unpackage/dist/dev/mp-weixin/pages/index/gesture-handler.js vendored
View File

@ -117,14 +117,18 @@ class GestureHandler {
} }
// 基础平移手势处理 // 基础平移手势处理
_handlePan(touch) { _handlePan(touch) {
const pointX = touch.x || touch.clientX - this.containerRect.left; const getPoint = (t) => ({
const pointY = touch.y || touch.clientY - this.containerRect.top; x: t.x || t.clientX - this.containerRect.left,
y: t.y || t.clientY - this.containerRect.top
});
const currentPoint = getPoint(touch);
if (this.lastPoint) { if (this.lastPoint) {
const dx = pointX - this.lastPoint.x; const dx = currentPoint.x - this.lastPoint.x;
const dy = pointY - this.lastPoint.y; const dy = currentPoint.y - this.lastPoint.y;
this.transformMatrix.translate(dx, dy); this.transformMatrix.tx += dx;
this.transformMatrix.ty += dy;
} }
this.lastPoint = { x: pointX, y: pointY }; this.lastPoint = currentPoint;
} }
// 基础缩放手势处理 // 基础缩放手势处理
_handlePinch(touches) { _handlePinch(touches) {

26
unpackage/dist/dev/mp-weixin/pages/index/transform-canvas.js vendored
View File

@ -26,12 +26,12 @@ const _sfc_main = {
canvasContext: null, canvasContext: null,
image: null, image: null,
dpr: 1, dpr: 1,
canvasDisplayWidth: 300, canvasDisplayWidth: 800,
// 默认显示尺寸 // 默认显示尺寸
canvasDisplayHeight: 300, canvasDisplayHeight: 600,
canvasActualWidth: 300, canvasActualWidth: 800,
// 实际像素尺寸 // 实际像素尺寸
canvasActualHeight: 300 canvasActualHeight: 600
}; };
}, },
watch: { watch: {
@ -56,12 +56,10 @@ const _sfc_main = {
}, },
matrix: { matrix: {
deep: true, deep: true,
immediate: true,
// 添加立即触发
handler() { handler() {
this.$nextTick(() => { this.$nextTick(this.redraw);
if (this.canvasContext) {
this.redraw();
}
});
} }
} }
}, },
@ -105,7 +103,7 @@ const _sfc_main = {
}); });
this.redraw(); this.redraw();
} catch (e) { } catch (e) {
common_vendor.index.__f__("error", "at pages/index/transform-canvas.vue:125", "图片加载失败:", e); common_vendor.index.__f__("error", "at pages/index/transform-canvas.vue:122", "图片加载失败:", e);
this.image = null; this.image = null;
this.redraw(); this.redraw();
} }
@ -115,6 +113,7 @@ const _sfc_main = {
return; return;
this.ctx.save(); this.ctx.save();
this.ctx.resetTransform(); this.ctx.resetTransform();
common_vendor.index.__f__("log", "at pages/index/transform-canvas.vue:136", this.canvasActualWidth, this.canvasActualHeight, "123123123123");
this.ctx.clearRect(0, 0, this.canvasActualWidth, this.canvasActualHeight); this.ctx.clearRect(0, 0, this.canvasActualWidth, this.canvasActualHeight);
this.ctx.scale(this.dpr, this.dpr); this.ctx.scale(this.dpr, this.dpr);
const { a, b, c, d, tx, ty } = this.matrix; const { a, b, c, d, tx, ty } = this.matrix;
@ -127,13 +126,6 @@ const _sfc_main = {
this.canvasDisplayWidth, this.canvasDisplayWidth,
this.canvasDisplayHeight this.canvasDisplayHeight
); );
} else {
this.ctx.fillStyle = "#f0f0f0";
this.ctx.fillRect(0, 0, this.width, this.height);
this.ctx.fillStyle = "#999";
this.ctx.textAlign = "center";
this.ctx.textBaseline = "middle";
this.ctx.fillText("图片加载失败", this.width / 2, this.height / 2);
} }
this.ctx.restore(); this.ctx.restore();
} }