7.14 提交

2025-07-14 17:16:32 +08:00
parent 5a56083d0c
commit c542b5e0ed
37 changed files with 1267 additions and 733 deletions
@@ -1,197 +1,109 @@
 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 的高度
-    },
+  data: {
+    squareX: 100,
+    squareY: 100,
+    squareWidth: 200,
+    squareHeight: 200,
+    isMoving: false,
+    isResizing: false,
+    resizeCorner: '',
+    startX: 0,
+    startY: 0,
+    startSquareX: 0,
+    startSquareY: 0,
+    startSquareWidth: 0,
+    startSquareHeight: 0
+  },

-    onReady() {
-        this.ctx = wx.createCanvasContext('myCanvas');
-        this.drawCanvas();
-    },
+  // 开始移动方块
+  onMoveStart(e) {
+    const { x, y } = e.touches[0];
+    this.setData({
+      isMoving: true,
+      startX: x,
+      startY: y,
+      startSquareX: this.data.squareX,
+      startSquareY: this.data.squareY
+    });
+  },

-    // 触摸开始事件（调整大小）
-    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
-        });
-    },
+  // 移动方块
+  onMoveMove(e) {
+    if (!this.data.isMoving) return;
+    const { x, y } = e.touches[0];
+    const deltaX = x - this.data.startX;
+    const deltaY = y - this.data.startY;
+    this.setData({
+      squareX: this.data.startSquareX + deltaX,
+      squareY: this.data.startSquareY + deltaY
+    });
+  },

-    // 触摸移动事件（调整大小）
-    onResizeMove(e) {
-        if (!this.data.isResizing) return;
+  // 结束移动方块
+  onMoveEnd() {
+    this.setData({ isMoving: false });
+  },

-        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;
+  // 开始调整方块尺寸
+  onResizeStart(e) {
+    const { x, y } = e.touches[0];
+    const corner = e.currentTarget.dataset.corner;
+    this.setData({
+      isResizing: true,
+      resizeCorner: corner,
+      startX: x,
+      startY: y,
+      startSquareWidth: this.data.squareWidth,
+      startSquareHeight: this.data.squareHeight,
+      startSquareX: this.data.squareX,
+      startSquareY: this.data.squareY
+    });
+  },

-        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;
-        }
+  // 调整方块尺寸
+  onResizeMove(e) {
+    if (!this.data.isResizing) return;
+    const { x, y } = e.touches[0];
+    const deltaX = x - this.data.startX;
+    const deltaY = y - this.data.startY;
+    let newSquareWidth = this.data.startSquareWidth;
+    let newSquareHeight = this.data.startSquareHeight;
+    let newSquareX = this.data.startSquareX;
+    let newSquareY = this.data.startSquareY;

-        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);
-            }
-        });
+    switch (this.data.resizeCorner) {
+      case 'tl':
+        newSquareWidth = Math.max(50, this.data.startSquareWidth - deltaX);
+        newSquareHeight = Math.max(50, this.data.startSquareHeight - deltaY);
+        newSquareX = this.data.startSquareX + deltaX;
+        newSquareY = this.data.startSquareY + deltaY;
+        break;
+      case 'tr':
+        newSquareWidth = Math.max(50, this.data.startSquareWidth + deltaX);
+        newSquareHeight = Math.max(50, this.data.startSquareHeight - deltaY);
+        newSquareY = this.data.startSquareY + deltaY;
+        break;
+      case 'bl':
+        newSquareWidth = Math.max(50, this.data.startSquareWidth - deltaX);
+        newSquareHeight = Math.max(50, this.data.startSquareHeight + deltaY);
+        newSquareX = this.data.startSquareX + deltaX;
+        break;
+      case 'br':
+        newSquareWidth = Math.max(50, this.data.startSquareWidth + deltaX);
+        newSquareHeight = Math.max(50, this.data.startSquareHeight + deltaY);
+        break;
    }
-});
+
+    this.setData({
+      squareWidth: newSquareWidth,
+      squareHeight: newSquareHeight,
+      squareX: newSquareX,
+      squareY: newSquareY
+    });
+  },
+
+  // 结束调整方块尺寸
+  onResizeEnd() {
+    this.setData({ isResizing: false });
+  }
+});
@@ -1,27 +1,16 @@
-<!--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>
+  <!-- 绿色方块 -->
+  <view 
+    class="green-square" 
+    style="top: {{squareY}}px; left: {{squareX}}px; width: {{squareWidth}}px; height: {{squareHeight}}px;"
+    bindtouchstart="onMoveStart"
+    bindtouchmove="onMoveMove"
+    bindtouchend="onMoveEnd"
+  >
+    <!-- 四个角的拖拽手柄 -->
+    <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>
+</view>
@@ -3,14 +3,23 @@
    position: relative;
    height: 100vh;
 }
+
+/* 新增绿色方块样式 */
+.green-square {
+    position: absolute;
+    background-color: #00FF00;
+    border: 2px solid #333;
+}
+
 .btn {
    position: absolute;
    bottom: 100rpx;
    left: 50%;
    transform: translateX(-50%);
-    z-index: 1; /* 确保按钮在最上层 */
+    z-index: 1;
 }
-/* 新增四个角的拖拽手柄样式 */
+
+/* 调整拖拽手柄定位方式 */
 .resize-handle {
    position: absolute;
    width: 20px;
@@ -19,11 +28,8 @@
    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; }
+
+.resize-handle.tl { top: -10px; left: -10px; }
+.resize-handle.tr { top: -10px; right: -10px; }
+.resize-handle.bl { bottom: -10px; left: -10px; }
+.resize-handle.br { bottom: -10px; right: -10px; }