如何在触摸屏上跟踪/跟踪用户输入以匹配屏幕上的图像答案

【问题标题】：How to trace / track user input on touch screen to match image on screen如何在触摸屏上跟踪/跟踪用户输入以匹配屏幕上的图像
【发布时间】：2023-03-10 01:40:01
【问题描述】：

所以我想要一个图像，比如说一个正方形，并希望用户用手指“追踪”图像，我需要跟踪它并了解/了解用户是否正确地完成了它。

用例是教育软件，用户可以在其中跟踪形状以学习如何绘制它们。

我的想法是一个 SVG 对象，然后是鼠标按住事件，但由于 SVG 有起点和终点，我不确定它们是否可以在图像等上一直被跟踪。

又如何？如果我在 SVG 上进行交互，是否是 if 语句和线路上的某种差异以及如果用户远离原始线路然后停止/中断的问题？

对不起，如果这解释得不好，我也几乎找不到任何东西，所以如果这是重复的，我也很抱歉。

找到这篇文章：https://www.smashingmagazine.com/2018/05/svg-interaction-pointer-events-property/

还有：https://gist.github.com/elidupuis/11325438 / http://bl.ocks.org/elidupuis/11325438

所以也许可以拼凑一些东西，但是任何方向都会受到赞赏。

【问题讨论】：

标签： javascript svg touch-event touchscreen

【解决方案1】：

var xmlns = "http://www.w3.org/2000/svg";

function setMouseCoordinates(event) {
    // contains the size of element having id 'image svg' and its position relative to the viewport, svg width/height equal to image height and width
    var boundary = document.getElementById('<id_of_image_svg>').getBoundingClientRect();
    // sets the x position of the mouse co-ordinate
    auth_mouseX = event.clientX - boundary.left;
    // sets the y position of the mouse co-ordinate
    auth_mouseY = event.clientY - boundary.top;
    return [auth_mouseX, auth_mouseY];

}

// add this in mousedown or respective touch event 
function drawPath(event) {
    var {
        auth_mouseX,
        auth_mouseY
    } = setMouseCoordinates(event);
    // Creates an element with the specified namespace URI and qualified name.
    scribble = document.createElementNS(xmlns, 'path');
    // sets the stroke width and color of the drawing drawn by scribble drawing tool
    scribble.style.stroke = 'red';
    // sets the stroke width of the scribble drawing
    scribble.style.strokeWidth = '2';
    scribble.style.fill = 'none';
    scribble.setAttributeNS(null, 'd', 'M' + auth_mouseX + ' ' + auth_mouseY);
}

现在您可以在 touchdown 事件中添加此功能并相应地创建逻辑。您必须检查用户是否已通过变量开始或停止绘图并相应地更改其值。

要评估任务是否在给定区域内，您必须使用一些形状检测 api 或 AI（您可以在谷歌上搜索，其中有很多，例如 AWS rekognition，还有很多我不记得名字了)

希望它无论如何都会有所帮助。 :)

【讨论】：