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

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

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

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

@ -32,10 +32,10 @@ export default {
canvasContext: null,
image: null,
dpr: 1,
canvasDisplayWidth: 300, // 默认显示尺寸
canvasDisplayHeight: 300,
canvasActualWidth: 300, // 实际像素尺寸
canvasActualHeight: 300
canvasDisplayWidth: 800, // 默认显示尺寸
canvasDisplayHeight: 600,
canvasActualWidth: 800, // 实际像素尺寸
canvasActualHeight: 600
};
},
watch: {
@ -58,15 +58,12 @@ export default {
immediate: true
},
matrix: {
deep: true,
handler() {
this.$nextTick(() => {
if (this.canvasContext) {
this.redraw();
}
});
}
}
deep: true,
immediate: true, // 添加立即触发
handler() {
this.$nextTick(this.redraw); // 确保在下一个tick重绘
}
},
},
mounted() {
this.initCanvas();
@ -136,6 +133,7 @@ export default {
// 重置为初始状态
this.ctx.resetTransform();
console.log(this.canvasActualWidth, this.canvasActualHeight,'123123123123')
this.ctx.clearRect(0, 0, this.canvasActualWidth, this.canvasActualHeight);
// 应用设备像素比缩放
@ -156,12 +154,12 @@ export default {
);
} 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.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);
}
// 恢复上下文状态

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() {
const hosts = "127.0.0.1,172.10.0.205";
const hosts = "127.0.0.1,172.10.0.226";
const port = "8090";
const id = "mp-weixin_Z7-NJ2";
const id = "mp-weixin_YSvwpn";
const lazy = typeof swan !== "undefined";
let restoreError = lazy ? () => {
} : initOnError();

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

@ -9,8 +9,8 @@ const _sfc_main = {
},
data() {
return {
canvasWidth: 300,
canvasHeight: 300,
canvasWidth: 800,
canvasHeight: 600,
transformMatrix: new pages_index_transformMatrix.TransformMatrix(),
gestureHandler: null,
containerRect: null,
@ -96,9 +96,7 @@ const _sfc_main = {
this.updateCanvas();
return;
}
if (this.gestureHandler) {
return this.handleTouchEvent(event);
}
this.gestureHandler.catchEvent(event);
if (!this.at) {
if (correctedEvent.touches.length === 1) {
this.handlePan(correctedEvent.touches[0]);
@ -113,7 +111,7 @@ const _sfc_main = {
const correctedTouches = Array.from(event.touches).map((touch) => {
const x = touch.clientX - this.containerRect.left;
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 {
...touch,
x,

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

@ -117,14 +117,18 @@ class GestureHandler {
}
// 基础平移手势处理
_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
});
const currentPoint = getPoint(touch);
if (this.lastPoint) {
const dx = pointX - this.lastPoint.x;
const dy = pointY - this.lastPoint.y;
this.transformMatrix.translate(dx, dy);
const dx = currentPoint.x - this.lastPoint.x;
const dy = currentPoint.y - this.lastPoint.y;
this.transformMatrix.tx += dx;
this.transformMatrix.ty += dy;
}
this.lastPoint = { x: pointX, y: pointY };
this.lastPoint = currentPoint;
}
// 基础缩放手势处理
_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,
image: null,
dpr: 1,
canvasDisplayWidth: 300,
canvasDisplayWidth: 800,
// 默认显示尺寸
canvasDisplayHeight: 300,
canvasActualWidth: 300,
canvasDisplayHeight: 600,
canvasActualWidth: 800,
// 实际像素尺寸
canvasActualHeight: 300
canvasActualHeight: 600
};
},
watch: {
@ -56,12 +56,10 @@ const _sfc_main = {
},
matrix: {
deep: true,
immediate: true,
// 添加立即触发
handler() {
this.$nextTick(() => {
if (this.canvasContext) {
this.redraw();
}
});
this.$nextTick(this.redraw);
}
}
},
@ -105,7 +103,7 @@ const _sfc_main = {
});
this.redraw();
} 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.redraw();
}
@ -115,6 +113,7 @@ const _sfc_main = {
return;
this.ctx.save();
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.scale(this.dpr, this.dpr);
const { a, b, c, d, tx, ty } = this.matrix;
@ -127,13 +126,6 @@ const _sfc_main = {
this.canvasDisplayWidth,
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();
}