我如何识别手绘形状类似于SVG模型

Question

我想让用户重新绘制一个svg形状（数字8），并能够检测该形状是否正确完成。 用户必须用手指在移动设备上重新绘制该svg的边框，才能继续浏览该网站。 我想使用Javascript。

我的第一种方法是使用隐藏的divs并检测每当鼠标以正确的顺序经过每个鼠标时（请参见草图 ），但是可能会出现错误。 我还想突出显示绘制的轨迹，以显示填充进度。

我应该使用哪种方法？

Answer 1

好吧，这取决于您如何实现绘图画布。 没有实际的代码，很难提供一个好的答案。

无论如何，您都可以尝试使用隐藏/透明并与第一个路径重叠的第二个路径。

然后捕获mouseenter / mouseleave（或您用于“绘制”的任何事件），并基于事件坐标，评估“形状”是否正确绘制。

基本示例：

 var foo = document.getElementById('foo'), x = -1, y = -1; function between(n, en, err) { return (n >= en - err && n <= en + err); } function fail() { // user failed so do stuff accordingly console.warn('User failed to draw properly'); // reset stuff x = -1; y = -1; } foo.addEventListener("mouseenter", function(event) { console.log('enter: ' + event.x + ',' + event.y); if (x === -1) { // first enter, so check if user started in the correct position // This is tied to the position of the canvas, if the user must start at the beginning // of the path or he can start wherever... // so you should implement your own logic return; } // Check if drawing is complete // Onde again, same as above // check if after the first mouseleave, the mouseenter event was // in an acceptable range if (!between(x, event.x, 10) || !between(y, event.y, 10)) { fail(); } }); foo.addEventListener("mouseleave", function(event) { console.log('exit: ' + event.x + ',' + event.y); x = event.x; y = event.y; }); 

 <svg> <path id="foo" d="M100,100 L150,100 a50,25 0 0,0 150,100 q50,-50 70,-170 Z" stroke-width="20" style="stroke: red; fill: none;" /> <path d="M100,100 L150,100 a50,25 0 0,0 150,100 q50,-50 70,-170 Z" style="stroke: #006666; fill: none;" /> </svg> 

例如，在此示例中，我接受10px的“错误”。 因此，我将隐藏路径的笔触设置为20px。

当用户鼠标离开可接受的绘图区域时，如果它没有重新进入可接受的范围，则它将使绘图失败并重置。

这只是一个例子，但是您可以以此为基础