Question

我正在尝试创建一个响应和动态的车速表。车速表将以数字形式反映速度，功能基于用户点击屏幕的点击次数。

因此，如果用户获得更高的点击次数，速度表将反映更高的速度，反之亦然。

问题：

为了能够反映速度表，我创建了一个包含速度表的画布。代码如下所示：

<div id="speedometer" style="position: absolute" width="100%" height="100%" left="160px" top="250px">
       <script type ="text/javascript" charset="utf-8">
           var dialCenter = [129,124];
           var needleCenter = [13,121.5];
           var dial = new Image, needle = new Image;
           window.onload =function(){
               //Find Canvas element
               var v =document.getElementById('myCanvas')[0];
               //Enable drawing object for the canvas
               var ctx = canvas.getContext('2d');
               ctx.save();
               //create the canvas
               ctx.clearRect(0,0, canvas.width,canvas.height);

               //setting and alignment of text in canvas
               ctx.font ="12px Arial";
               ctx.textAlign ="center";
               ctx. filltext("Speed Meter",10,50);

               //center the dial on the canvas
               ctx.translate(c.width/2, c.height/2);
               ctx.drawImage(dial, -dialCenter[0], -dialCenter[1]);

               //center the needle on the canvas
               ctx.rotate(2.3*Math.sin((new Date)*1/1000)- 0.15);
               ctx.drawImage(needle, -needleCenter[0], -needleCenter[1]);
               ctx.restore();
           };
           //Assign the image source 
           dial.src='MeterBar.png';
           needle.src = 'MeterPin.png';
        </script>
</div>

<script>
       function speedometer(){
            ...(Function to create speedometer to by dynamic)
        }
</script>

然而，在这一点上，当用户点击屏幕时，我仍然坚持创建速度的反映。

我确实有这样的想法：

在用户首次与屏幕交互时，它将记录时间，因此对于每次后续触摸，它将记录用户交互时间。因此，我创建速度反射的公式将是:(（第二触摸时间） - （第一触摸时间））/（第一触摸时间）以获得速度。然而，这是唯一的方式，因为我觉得它需要巨大的内存空间和处理空间。还有其他有效的方法吗？

因此，我想问：我如何能够使速度表能够反映用户点击屏幕上点击次数的速度？感谢。

Answer 1

简单地说，您需要将最后点击时间与当前点击进行比较。类似的东西：

var lastClickDateTime = new Date();

function getSpeed() {
    var currentDateTime = new Date();
    return currentDateTime.getTime() - lastClickDateTime.getTime();
}

然而，实际上这会让您大幅度提升数据值，因此您可能希望平均一系列最后点击次数。

动态速度表如何反映用户交互的速度

1 个答案: