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

所以我想要一个图像，比方说一个正方形，希望用户用手指“跟踪”图像，我需要跟踪这一点，并知道/理解用户是否做得正确

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

我的想法是一个SVG对象，然后鼠标按住事件，但因为SVG有开始点和结束点，我不确定它们是否可以在图像上一直跟踪等等

又如何呢？如果我在SVG上有交互，那么这是否是一个If语句和行上某种变化的问题，如果用户远离原始行，那么停止/中断

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

找到这篇文章：

及:

因此，我们可能会拼凑一些东西，但是的，任何方向都会受到欢迎。

var xmlns=”http://www.w3.org/2000/svg";
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);
}

功能设置鼠标坐标（事件）{
//包含id为“image svg”的元素的大小及其相对于视口的位置，svg宽度/高度等于图像高度和宽度
var boundary=document.getElementById（“”）.getBoundingClientRect（）；
//设置鼠标坐标的x位置
auth_mouseX=event.clientX-boundary.left；
//设置鼠标坐标的y位置
auth_mouseY=event.clientY-boundary.top；
返回[auth_mouseX，auth_mouseY]；
}
//将其添加到鼠标向下或相应的触摸事件中
函数drawPath（事件）{
变量{
auth_mouseX，
auth_mouseY
}=设置鼠标坐标（事件）；
//创建具有指定命名空间URI和限定名称的元素。
scribble=document.createElements（xmlns，'path'）；
//设置由scribble绘图工具绘制的图形的笔划宽度和颜色
scribble.style.stroke='red'；
//设置涂鸦图形的笔划宽度
scribble.style.strokeWidth='2'；
scribble.style.fill='none'；
scribble.setAttributeNS（null，'d'，'M'+auth_mouseX+''+auth_mouseY）；
}

现在，您可以在触地事件中添加此函数，并相应地创建逻辑。必须检查用户是否已通过变量启动或停止图形，并相应地更改其值

为了评估任务是否在给定区域，你必须使用一些形状检测api或AI（你可以在谷歌上搜索，其中有很多像AWS Rekognion，还有很多我不记得名字）

希望这对你有所帮助。：）