mcp服务

point.html

@@ -139,7 +139,6 @@
     <!-- 左侧图片列表 -->
     <div id="left-panel">
         <h2>图片列表</h2>
-        <button id="clearBoxesBtn" style="width:100%;margin-bottom:10px;background:#ff7875;color:#fff;border:none;border-radius:4px;padding:8px 0;font-size:15px;cursor:pointer;">清空所有标记</button>
         <div id="imgList"></div>
     </div>
     <!-- 中间标注区 -->
@@ -151,12 +150,14 @@
             <button id="zoomResetBtn" style="padding:4px 14px;">重置</button>
         </div>
         <canvas id="canvas"></canvas>
+        <div id="coordTip" style="position:fixed;display:none;pointer-events:none;z-index:9999;font-size:12px;color:#fff;background:rgba(0,0,0,0.7);padding:1px 6px;border-radius:4px;"></div>
     </div>
     <!-- 右侧标注结果 -->
     <div id="right-panel">
         <h2>标注结果</h2>
         <div id="boxes-list"></div>
-        <button id="exportBtn" disabled>导出YOLO标注</button>
+        <button id="clearBoxesBtn" style="width:100%;margin-bottom:10px;background:#ff7875;color:#fff;border:none;border-radius:4px;padding:8px 0;font-size:15px;cursor:pointer;">清空所有标记</button>
+        <button id="exportBtn" disabled style="margin-top:0;">导出YOLO标注</button>
     </div>
 </div>
 
@@ -309,6 +310,18 @@
         ];
         let currentImgIndex = 0;
 
+        // mock 标注数据，key为图片url
+        let mockBoxes = {
+            'https://image.cszcyl.cn/2022/image/YfJA8eON3exqppNSQrW5EhE9rGdNS1qwou5dgj3L3651WcDDZEy89Hn1A296TXIx.png': [
+                { x: 100, y: 120, w: 80, h: 60, classId: 0 },
+                { x: 300, y: 200, w: 120, h: 90, classId: 0 }
+            ],
+            'https://image.cszcyl.cn/coze/%E9%AB%98%E8%80%83%E5%BF%85%E8%83%9C-%E8%B6%85%E6%B8%85.png': [
+                { x: 50, y: 50, w: 60, h: 60, classId: 0 }
+            ]
+            // 其它图片可继续添加
+        };
+
         // 渲染左侧图片缩略图列表
         function renderImgList() {
             let html = '';
@@ -344,7 +357,8 @@
                 scale = 1.0;
                 offsetX = 0;
                 offsetY = 0;
-                boxes = [];
+                // 根据mock数据初始化boxes
+                boxes = mockBoxes[url] ? JSON.parse(JSON.stringify(mockBoxes[url])) : [];
                 drawAll();
                 updateBoxesList();
             };
@@ -420,6 +434,20 @@
             const canvasX = e.clientX - rect.left;
             const canvasY = e.clientY - rect.top;
             const {x: mouseX, y: mouseY} = toImageCoord(canvasX, canvasY);
+            // 实时显示坐标
+            if (imgWidth) {
+                let showX = Math.round(mouseX);
+                let showY = Math.round(mouseY);
+                if (showX >= 0 && showX <= imgWidth && showY >= 0 && showY <= imgHeight) {
+                    $('#coordTip').text(`${showX}, ${showY}`).css({
+                        left: (e.clientX - 10) + 'px',
+                        top: (e.clientY - 28) + 'px',
+                        display: 'block'
+                    });
+                } else {
+                    $('#coordTip').hide();
+                }
+            }
             // 新增：画布拖拽
             if (isPanning) {
                 let domW = $('#canvas').width();
@@ -615,6 +643,11 @@
 
         // 禁止右键菜单弹出
         $('#canvas').on('contextmenu', function(e) { e.preventDefault(); });
+
+        // 鼠标移出canvas时隐藏坐标
+        $('#canvas').on('mouseleave', function() {
+            $('#coordTip').hide();
+        });
     });
 </script>
 </body>