Method drawHand

static/visualizer.js:321–373

(handData, width, height)

    }
    
    drawHand(handData, width, height) {
        const ctx = this.ctx;
        
        if (!handData.landmarks) return;
        
        // 缩放坐标
        const landmarks = handData.landmarks.map(p => 
            this.scalePoint([p[0], p[1]], width, height)
        );
        
        // 绘制手部连接线
        ctx.strokeStyle = this.colors.secondary;
        ctx.lineWidth = 2;
        ctx.globalAlpha = 0.8;
        
        // MediaPipe手部连接定义
        const connections = [
            [0, 1], [1, 2], [2, 3], [3, 4],  // 拇指
            [0, 5], [5, 6], [6, 7], [7, 8],  // 食指
            [5, 9], [9, 10], [10, 11], [11, 12], // 中指
            [9, 13], [13, 14], [14, 15], [15, 16], // 无名指
            [13, 17], [17, 18], [18, 19], [19, 20], // 小指
            [0, 17] // 手腕连接
        ];
        
        connections.forEach(([start, end]) => {
            ctx.beginPath();
            ctx.moveTo(landmarks[start][0], landmarks[start][1]);
            ctx.lineTo(landmarks[end][0], landmarks[end][1]);
            ctx.stroke();
        });
        
        // 绘制关键点
        landmarks.forEach((point, i) => {
            ctx.fillStyle = this.colors.secondary;
            ctx.beginPath();
            ctx.arc(point[0], point[1], 3, 0, Math.PI * 2);
            ctx.fill();
        });
        
        ctx.globalAlpha = 1;
        
        // 绘制握持评分
        if (handData.grasp_score !== undefined) {
            ctx.font = this.fonts.body;
            ctx.fillStyle = this.colors.text;
            ctx.fillText(
                `握持评分 Grasp Score: ${handData.grasp_score.toFixed(2)}`,
                20,
                80
            );
        }
    }
    
    drawProgressBars(tracking, width, height) {
        const ctx = this.ctx;