gdxz/miniprogram-jianfanCase
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

7.3提交

Browse Source
This commit is contained in:
zoujiandong
2025-07-03 13:14:39 +08:00
parent 8f4ee464dc
commit 5a56083d0c
44 changed files with 2003 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files
case/pages/scan/scan.js
+197
View File
@@ -0,0 +1,197 @@
Page({
data: {
frameX: 100, // canvas 左上角 X 坐标
frameY: 100, // canvas 左上角 Y 坐标
frameWidth: 200, // canvas 宽度
frameHeight: 200, // canvas 高度
isDragging: false, // 是否正在拖拽
startX: 0, // 触摸起始 X 坐标
startY: 0, // 触摸起始 Y 坐标
startFrameX: 0, // 拖拽前 canvas 的 X 坐标
startFrameY: 0, // 拖拽前 canvas 的 Y 坐标
canvasWidth: wx.getSystemInfoSync().windowWidth, // 屏幕宽度
canvasHeight: wx.getSystemInfoSync().windowHeight, // 屏幕高度
cameraX: 0, // camera 左上角 X 坐标
cameraY: 0, // camera 左上角 Y 坐标
cameraWidth: wx.getSystemInfoSync().windowWidth, // camera 宽度
cameraHeight: wx.getSystemInfoSync().windowHeight, // camera 高度
isResizing: false, // 是否正在调整大小
resizeCorner: '', // 调整大小的角
startCameraWidth: 0, // 调整大小前 camera 的宽度
startCameraHeight: 0 // 调整大小前 camera 的高度
},
onReady() {
this.ctx = wx.createCanvasContext('myCanvas');
this.drawCanvas();
},
// 触摸开始事件（调整大小）
onResizeStart(e) {
const { x, y } = e.touches[0];
const corner = e.currentTarget.dataset.corner;
this.setData({
isResizing: true,
resizeCorner: corner,
startX: x,
startY: y,
startCameraWidth: this.data.cameraWidth,
startCameraHeight: this.data.cameraHeight
});
},
// 触摸移动事件（调整大小）
onResizeMove(e) {
if (!this.data.isResizing) return;
const { x, y } = e.touches[0];
const { startX, startY, startCameraWidth, startCameraHeight, cameraX, cameraY, canvasWidth, canvasHeight } = this.data;
const deltaX = x - startX;
const deltaY = y - startY;
let newWidth = startCameraWidth;
let newHeight = startCameraHeight;
let newX = cameraX;
let newY = cameraY;
switch (this.data.resizeCorner) {
case 'tl':
newWidth = Math.max(50, startCameraWidth - deltaX);
newHeight = Math.max(50, startCameraHeight - deltaY);
newX = Math.min(cameraX + deltaX, canvasWidth - 50);
newY = Math.min(cameraY + deltaY, canvasHeight - 50);
break;
case 'tr':
newWidth = Math.max(50, startCameraWidth + deltaX);
newHeight = Math.max(50, startCameraHeight - deltaY);
newY = Math.min(cameraY + deltaY, canvasHeight - 50);
break;
case 'bl':
newWidth = Math.max(50, startCameraWidth - deltaX);
newHeight = Math.max(50, startCameraHeight + deltaY);
newX = Math.min(cameraX + deltaX, canvasWidth - 50);
break;
case 'br':
newWidth = Math.max(50, startCameraWidth + deltaX);
newHeight = Math.max(50, startCameraHeight + deltaY);
break;
}
this.setData({
cameraWidth: newWidth,
cameraHeight: newHeight,
cameraX: newX,
cameraY: newY
});
},
// 触摸结束事件（调整大小）
onResizeEnd() {
this.setData({ isResizing: false });
},
// 绘制 canvas 内容
drawCanvas() {
const { frameWidth, frameHeight } = this.data;
this.ctx.clearRect(0, 0, frameWidth, frameHeight);
this.ctx.setFillStyle('rgba(0, 0, 0, 0.5)');
this.ctx.fillRect(0, 0, frameWidth, frameHeight);
this.ctx.draw();
},
// 触摸开始事件
onTouchStart(e) {
const { x, y } = e.touches[0];
this.setData({
isDragging: true,
startX: x,
startY: y,
startFrameX: this.data.frameX,
startFrameY: this.data.frameY
});
},
// 触摸移动事件
onTouchMove(e) {
if (!this.data.isDragging) return;
const { x, y } = e.touches[0];
const { startX, startY, startFrameX, startFrameY, canvasWidth, canvasHeight, frameWidth, frameHeight } = this.data;
const deltaX = x - startX;
const deltaY = y - startY;
// 计算新的坐标并限制不超出屏幕边界
const newFrameX = Math.max(0, Math.min(startFrameX + deltaX, canvasWidth - frameWidth));
const newFrameY = Math.max(0, Math.min(startFrameY + deltaY, canvasHeight - frameHeight));
this.setData({
frameX: newFrameX,
frameY: newFrameY
});
},
// 触摸结束事件
onTouchEnd() {
this.setData({ isDragging: false });
},
// 拍照方法
takePhoto() {
const ctx = wx.createCameraContext();
const { frameX, frameY, frameWidth, frameHeight } = this.data;
// 调用相机拍照
ctx.takePhoto({
quality: 'high',
success: (res) => {
const tempFilePath = res.tempImagePath;
// 获取图片信息，用于计算比例
wx.getImageInfo({
src: tempFilePath,
success: (imageInfo) => {
const { width: imageWidth, height: imageHeight } = imageInfo;
const { canvasWidth, canvasHeight } = this.data;
// 计算图片与屏幕的比例
const ratioX = imageWidth / canvasWidth;
const ratioY = imageHeight / canvasHeight;
// 计算截取区域的实际坐标和尺寸
const cropX = Math.floor(frameX * ratioX);
const cropY = Math.floor(frameY * ratioY);
const cropWidth = Math.floor(frameWidth * ratioX);
const cropHeight = Math.floor(frameHeight * ratioY);
// 创建临时 canvas 用于裁剪图片
const tempCanvasId = 'tempCanvas';
const tempCtx = wx.createCanvasContext(tempCanvasId);
// 将拍摄的图片绘制到临时 canvas
tempCtx.drawImage(tempFilePath, 0, 0, imageWidth, imageHeight);
tempCtx.draw(false, () => {
// 从临时 canvas 截取指定区域图片
wx.canvasToTempFilePath({
canvasId: tempCanvasId,
x: cropX,
y: cropY,
width: cropWidth,
height: cropHeight,
destWidth: cropWidth,
destHeight: cropHeight,
success: (cropRes) => {
console.log('裁剪后的图片路径:', cropRes.tempFilePath);
},
fail: (err) => {
console.error('裁剪图片失败:', err);
}
});
});
},
fail: (err) => {
console.error('获取图片信息失败:', err);
}
});
},
fail: (err) => {
console.error('拍照失败:', err);
}
});
}
});
case/pages/scan/scan.json
+3
View File
@@ -0,0 +1,3 @@
{
"usingComponents": {}
}
case/pages/scan/scan.wxml
+27
View File
@@ -0,0 +1,27 @@
<!--case/pages/scan/scan.wxml-->
<view class="page">
<view class="camera-container" style="position: relative; width: 100%; height: 100vh;">
<camera
device-position="front"
flash="off"
mode="mode"
binderror="error"
style="width: {{cameraWidth}}px; height: {{cameraHeight}}px; position: absolute; top: {{cameraY}}px; left: {{cameraX}}px;"
></camera>
<!-- 四个角的拖拽手柄 -->
<view class="resize-handle tl" bindtouchstart="onResizeStart" bindtouchmove="onResizeMove" data-corner="tl"></view>
<view class="resize-handle tr" bindtouchstart="onResizeStart" bindtouchmove="onResizeMove" data-corner="tr"></view>
<view class="resize-handle bl" bindtouchstart="onResizeStart" bindtouchmove="onResizeMove" data-corner="bl"></view>
<view class="resize-handle br" bindtouchstart="onResizeStart" bindtouchmove="onResizeMove" data-corner="br"></view>
</view>
<canvas
canvas-id="myCanvas"
style="position: absolute; top: {{frameY}}px; left: {{frameX}}px; width: {{frameWidth}}px; height: {{frameHeight}}px;"
bindtouchstart="onTouchStart"
bindtouchmove="onTouchMove"
bindtouchend="onTouchEnd"
></canvas>
<!-- 临时 canvas 用于裁剪图片，隐藏处理 -->
<canvas canvas-id="tempCanvas" style="position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px;"></canvas>
<button type="primary" bindtap="takePhoto" class="btn">拍照</button>
</view>
case/pages/scan/scan.wxss
+29
View File
@@ -0,0 +1,29 @@
/* case/pages/scan/scan.wxss */
.page {
position: relative;
height: 100vh;
}
.btn {
position: absolute;
bottom: 100rpx;
left: 50%;
transform: translateX(-50%);
z-index: 1; /* 确保按钮在最上层 */
}
/* 新增四个角的拖拽手柄样式 */
.resize-handle {
position: absolute;
width: 20px;
height: 20px;
background: #fff;
border: 2px solid #333;
z-index: 10;
}
/* 左上角 */
.resize-handle.tl { top: -10px; left: -10px; cursor: nw-resize; }
/* 右上角 */
.resize-handle.tr { top: -10px; right: -10px; cursor: ne-resize; }
/* 左下角 */
.resize-handle.bl { bottom: -10px; left: -10px; cursor: sw-resize; }
/* 右下角 */
.resize-handle.br { bottom: -10px; right: -10px; cursor: se-resize; }