| 213 | } |
| 214 | |
| 215 | drawHand(handData) { |
| 216 | // 使用SVG绘制手部骨骼 |
| 217 | const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); |
| 218 | svg.style.position = 'absolute'; |
| 219 | svg.style.top = '0'; |
| 220 | svg.style.left = '0'; |
| 221 | svg.style.width = '100%'; |
| 222 | svg.style.height = '100%'; |
| 223 | svg.style.pointerEvents = 'none'; |
| 224 | |
| 225 | // 绘制连接线 |
| 226 | handData.connections.forEach(conn => { |
| 227 | const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); |
| 228 | line.setAttribute('x1', conn.start.x); |
| 229 | line.setAttribute('y1', conn.start.y); |
| 230 | line.setAttribute('x2', conn.end.x); |
| 231 | line.setAttribute('y2', conn.end.y); |
| 232 | line.setAttribute('class', 'hand-skeleton'); |
| 233 | svg.appendChild(line); |
| 234 | }); |
| 235 | |
| 236 | // 绘制关节点 |
| 237 | handData.landmarks.forEach(point => { |
| 238 | const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); |
| 239 | circle.setAttribute('cx', point.x); |
| 240 | circle.setAttribute('cy', point.y); |
| 241 | circle.setAttribute('r', '3'); |
| 242 | circle.setAttribute('class', 'hand-joint'); |
| 243 | svg.appendChild(circle); |
| 244 | }); |
| 245 | |
| 246 | // 添加到覆盖层 |
| 247 | const oldSvg = this.overlay.querySelector('svg'); |
| 248 | if (oldSvg) oldSvg.remove(); |
| 249 | this.overlay.appendChild(svg); |
| 250 | } |
| 251 | |
| 252 | drawObjects(objects) { |
| 253 | // 绘制检测到的物体 |