触摸屏压感检测 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 压感测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f5f5f5;
        }
        canvas {
            border: 2px solid #ccc;
            background-color: white;
            margin-bottom: 20px;
        }
        .info {
            font-size: 16px;
            color: #333;
        }
        .pressure-value {
            font-weight: bold;
            color: #e74c3c; /* 高亮显示压力值 */
        }
    </style>
</head>
<body>
    <h1>Canvas 压感测试</h1>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <div class="info">
        当前压力值：<span class="pressure-value" id="pressureValue">N/A</span>
    </div>

    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        const pressureValueDisplay = document.getElementById('pressureValue');

        let isDrawing = false;

        // 检查是否支持 Pointer Events
        if (window.PointerEvent) {
            console.log("Pointer Events 支持已启用");

            canvas.addEventListener('pointerdown', (event) => {
                if (event.pointerType === 'pen') {
                    isDrawing = true;
                    ctx.beginPath();
                    updatePressure(event.pressure);
                }
            });

            canvas.addEventListener('pointermove', (event) => {
                if (isDrawing && event.pointerType === 'pen' && event.pressure > 0) {
                    updatePressure(event.pressure);
                    drawLine(event.offsetX, event.offsetY, event.pressure);
                }
            });

            canvas.addEventListener('pointerup', () => {
                isDrawing = false;
                ctx.closePath();
            });

            canvas.addEventListener('pointercancel', () => {
                isDrawing = false;
                ctx.closePath();
            });
        } else {
            console.log("Pointer Events 不支持，回退到 Touch Events");
        }

        // 使用 Touch Events 处理触摸输入（如果 Pointer Events 不可用）
        canvas.addEventListener('touchstart', (event) => {
            event.preventDefault();
            isDrawing = true;
            ctx.beginPath();
        });

        canvas.addEventListener('touchmove', (event) => {
            event.preventDefault();
            if (isDrawing) {
                const touch = event.touches[0];
                const x = touch.clientX - canvas.offsetLeft;
                const y = touch.clientY - canvas.offsetTop;
                drawLine(x, y, 0.5); // 默认压力值为 0.5
            }
        });

        canvas.addEventListener('touchend', () => {
            isDrawing = false;
            ctx.closePath();
        });

        function drawLine(x, y, pressure) {
            ctx.lineWidth = pressure * 20; // 根据压力值调整线条宽度
            ctx.lineCap = 'round';
            ctx.strokeStyle = '#000';
            ctx.lineTo(x, y);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(x, y);
        }

        function updatePressure(pressure) {
            // 更新压力值显示
            pressureValueDisplay.textContent = pressure.toFixed(2); // 保留两位小数
        }
    </script>
</body>
</html>

　　

posted @ 2025-03-19 11:46  China Soft  阅读(41)  评论(0)    收藏  举报